GraphQL - Validation

Lors de l'ajout ou de la modification de données, il est important de valider l'entrée utilisateur. Par exemple, nous pouvons avoir besoin de nous assurer que la valeur d'un champ n'est toujours pas nulle. On peut utiliser! (non-nullable) tapez marker dans GraphQL pour effectuer une telle validation.

La syntaxe d'utilisation de ! le marqueur de type est comme indiqué ci-dessous -

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

La syntaxe ci-dessus garantit que tous les champs ne sont pas nuls.

Si nous voulons implémenter des règles supplémentaires comme vérifier la longueur d'une chaîne ou vérifier si un nombre se trouve dans une plage donnée, nous pouvons définir des validateurs personnalisés. La logique de validation personnalisée fera partie de la fonction de résolution. Comprenons cela à l'aide d'un exemple.

Illustration - Implémentation de validateurs personnalisés

Créons un formulaire d'inscription avec une validation de base. Le formulaire comportera des champs email, prénom et mot de passe.

Étape 1 - Téléchargez et installez les dépendances requises pour le projet

Créez un dossier nommé validation-app. Changez le répertoire en validation-app depuis le terminal. Suivez les étapes 3 à 5 expliquées dans le chapitre Configuration de l'environnement.

Étape 2 - Créer un schéma

Ajouter schema.graphql fichier dans le dossier du projet validation-app et ajoutez le code suivant -

type Query {
   greeting:String
}

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

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

Note- Nous pouvons utiliser le type d'entrée SignUpInput pour réduire le nombre de paramètres dans la fonction signUp. Ainsi, la fonction signUp ne prend qu'un seul paramètre de type SignUpInput.

Étape 3 - Créer des résolveurs

Créer un fichier resolvers.js dans le dossier du projet et ajoutez le code suivant -

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

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

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

      const emailExpression = /^(([^<>()\[\]\\.,;:\[email protected]"]+(\.[^<>()\[\]\\.,;:\[email protected]"]+)*)|(".+"))@((\[[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}

La fonction résolveur, signUp accepte les paramètres email, mot de passe et prénom. Celles-ci seront transmises via la variable d'entrée afin qu'elle soit accessible via args.input.

Étape 4 - Exécutez l'application

Créez un fichier server.js. Reportez-vous à l'étape 8 du chapitre Configuration de l'environnement. Exécutez la commande npm start dans le terminal. Le serveur sera opérationnel sur le port 9000. Ici, nous utiliserons GraphiQL comme client pour tester l'application.

Ouvrez le navigateur et entrez l'URL http://localhost:9000/graphiql. Tapez la requête suivante dans l'éditeur -

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

Étant donné que l'entrée pour la fonction d'inscription est un type complexe, nous devons utiliser des variables de requête dans graphiql. Pour cela, nous devons d'abord donner un nom à la requête et l'appeler doSignUp, l'entrée $ est une variable de requête.

La variable de requête suivante doit être saisie dans l'onglet Variables de requête de graphiql -

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

Le tableau des erreurs contient les détails des erreurs de validation comme indiqué ci-dessous -

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

Nous devons entrer une entrée appropriée pour chaque champ comme indiqué ci-dessous -

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

La réponse est la suivante -

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

Ici, dans la requête ci-dessous, nous n'attribuons aucun mot de passe.

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

Si un champ obligatoire n'est pas fourni, le serveur qraphql affichera l'erreur suivante -

{
   "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
            }
         ]
      }
   ]
}