GraphQL - Validazione

Durante l'aggiunta o la modifica dei dati, è importante convalidare l'input dell'utente. Ad esempio, potremmo aver bisogno di assicurarci che il valore di un campo non sia sempre nullo. Possiamo usare! (non-nullable) tipo marker in GraphQL per eseguire tale convalida.

La sintassi per l'utilizzo di ! l'indicatore del tipo è come indicato di seguito:

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

La sintassi precedente garantisce che tutti i campi non siano nulli.

Se vogliamo implementare regole aggiuntive come il controllo della lunghezza di una stringa o il controllo se un numero rientra in un dato intervallo, possiamo definire validatori personalizzati. La logica di validazione personalizzata farà parte della funzione resolver. Cerchiamo di capirlo con l'aiuto di un esempio.

Illustrazione - Implementazione di validatori personalizzati

Creiamo un modulo di iscrizione con convalida di base. Il modulo avrà campi e-mail, nome e password.

Passaggio 1: scaricare e installare le dipendenze richieste per il progetto

Crea una cartella denominata validation-app. Cambia la directory in validation-app dal terminale. Seguire i passaggi da 3 a 5 spiegati nel capitolo Configurazione dell'ambiente.

Passaggio 2: creare uno schema

Inserisci schema.graphql file nella cartella del progetto validation-app e aggiungi il seguente codice -

type Query {
   greeting:String
}

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

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

Note- Possiamo usare il tipo di input SignUpInput per ridurre il numero di parametri nella funzione signUp. Quindi, la funzione signUp accetta solo un parametro di tipo SignUpInput.

Passaggio 3: creazione di resolver

Crea un file resolvers.js nella cartella del progetto e aggiungi il seguente codice -

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 funzione resolver, signUp accetta i parametri email, password e firstName. Questi verranno passati attraverso la variabile di input in modo che sia possibile accedervi tramite args.input.

Passaggio 4: eseguire l'applicazione

Crea un file server.js. Fare riferimento al passaggio 8 nel capitolo Configurazione dell'ambiente. Esegui il comando npm start nel terminale. Il server sarà attivo e funzionante sulla porta 9000. Qui useremo GraphiQL come client per testare l'applicazione.

Apri il browser e inserisci l'URL http://localhost:9000/graphiql. Digita la seguente query nell'editor:

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

Poiché l'input per la funzione di registrazione è un tipo complesso, è necessario utilizzare le variabili di query in graphiql. Per questo, dobbiamo prima dare un nome alla query e chiamarla doSignUp, $ input è una variabile di query.

La seguente variabile di query deve essere inserita nella scheda Variabili di query di graphiql -

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

L'array degli errori contiene i dettagli degli errori di convalida come mostrato di seguito:

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

Dobbiamo inserire un input appropriato per ogni campo come indicato di seguito -

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

La risposta è la seguente:

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

Qui, nella query sottostante, non stiamo assegnando alcuna password.

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

Se non viene fornito un campo obbligatorio, il server qraphql visualizzerà il seguente errore:

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