GraphQL - Validasi

Saat menambahkan atau memodifikasi data, penting untuk memvalidasi input pengguna. Misalnya, kita mungkin perlu memastikan bahwa nilai bidang selalu tidak null. Kita bisa gunakan! (non-nullable) ketik penanda di GraphQL untuk melakukan validasi tersebut.

Sintaks untuk menggunakan file ! jenis penanda seperti yang diberikan di bawah ini -

type TypeName {
   field1:String!,
   field2:String!,
   field3:Int!
}

Sintaks di atas memastikan bahwa semua field tidak null.

Jika kita ingin menerapkan aturan tambahan seperti memeriksa panjang string atau memeriksa apakah suatu angka berada dalam kisaran tertentu, kita dapat menentukan validator khusus. Logika validasi kustom akan menjadi bagian dari fungsi resolver. Mari kita pahami ini dengan bantuan sebuah contoh.

Ilustrasi - Menerapkan Validator Kustom

Mari kita buat formulir pendaftaran dengan validasi dasar. Formulir akan memiliki bidang email, nama depan dan kata sandi.

Langkah 1 - Unduh dan Instal Dependensi yang Diperlukan untuk Proyek

Buat folder bernama validation-app. Ubah direktori menjadi aplikasi validasi dari terminal. Ikuti langkah 3 hingga 5 yang dijelaskan di bab Pengaturan Lingkungan.

Langkah 2 - Buat Skema

Menambahkan schema.graphql file di folder proyek validation-app dan tambahkan kode berikut -

type Query {
   greeting:String
}

type Mutation {
   signUp(input:SignUpInput):String
}

input SignUpInput {
   email:String!,
   password:String!,
   firstName:String!
}

Note- Kita dapat menggunakan tipe input SignUpInput untuk mengurangi jumlah parameter dalam fungsi signUp. Jadi, fungsi signUp hanya membutuhkan satu parameter tipe SignUpInput.

Langkah 3 - Buat Resolver

Buat file resolvers.js di folder proyek dan tambahkan kode berikut -

const Query = {
   greeting:() => "Hello"
}

const Mutation ={
   signUp:(root,args,context,info) => {

      const {email,firstName,password} = args.input;

      const emailExpression = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
      
      const isValidEmail =  emailExpression.test(String(email).toLowerCase())
      if(!isValidEmail)
      throw new Error("email not in proper format")

      if(firstName.length > 15)
      throw new Error("firstName should be less than 15 characters")

      if(password.length < 8 )
      throw new Error("password should be minimum 8 characters")
      
      return "success";
   }
}
module.exports = {Query,Mutation}

Fungsi resolver, signUp menerima email parameter, kata sandi dan nama depan. Ini akan dilewatkan melalui variabel input sehingga dapat diakses melalui args.input.

Langkah 4 - Jalankan Aplikasi

Buat file server.js. Lihat langkah 8 di Bab Pengaturan Lingkungan. Jalankan perintah npm start di terminal. Server akan aktif dan berjalan pada 9000 port. Di sini, kami akan menggunakan GraphiQL sebagai klien untuk menguji aplikasi.

Buka browser dan masukkan URL http://localhost:9000/graphiql. Ketik kueri berikut di editor -

mutation doSignUp($input:SignUpInput) {
   signUp(input:$input)
}

Karena input ke fungsi signup adalah tipe yang kompleks, kita perlu menggunakan variabel query dalam graphiql. Untuk ini, pertama-tama kita perlu memberi nama pada kueri dan menyebutnya doSignUp, $ input adalah variabel kueri.

Variabel kueri berikut harus dimasukkan di tab variabel kueri dari graphiql -

{
   "input":{
      "email": "abc@abc",
      "firstName": "kannan",
      "password": "pass@1234"
   }
}

Array kesalahan berisi detail kesalahan validasi seperti yang ditunjukkan di bawah ini -

{
   "data": {
      "signUp": null
   },
   
   "errors": [
      {
         "message": "email not in proper format",
         "locations": [
            {
               "line": 2,
               "column": 4
            }
         ],
         "path": [
            "signUp"
         ]
      }
   ]
}

Kami harus memasukkan input yang tepat untuk setiap bidang seperti yang diberikan di bawah ini -

{
   "input":{
      "email": "[email protected]",
      "firstName": "kannan",
      "password": "pass@1234"
   }
}

Tanggapannya adalah sebagai berikut -

{
   "data": {
      "signUp": "success"
   }
}

Di sini, dalam kueri di bawah ini, kami tidak memberikan kata sandi apa pun.

{
   "input":{
      "email": "[email protected]",
      "firstName": "kannan"
   }
}

Jika bidang yang diperlukan tidak tersedia, maka server qraphql akan menampilkan kesalahan berikut -

{
   "errors": [
      {
         "message": "Variable \"$input\" got invalid value {\"email\":\"[email protected]\",\"firstName\":\"kannan\"}; Field value.password of required type String! was not provided.",
         "locations": [
            {
               "line": 1,
               "column": 19
            }
         ]
      }
   ]
}