GraphQL - Validación

Al agregar o modificar datos, es importante validar la entrada del usuario. Por ejemplo, es posible que debamos asegurarnos de que el valor de un campo no sea siempre nulo. Nosotros podemos usar! (non-nullable) tipo de marcador en GraphQL para realizar dicha validación.

La sintaxis para usar el ! tipo de marcador es como se indica a continuación:

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

La sintaxis anterior asegura que todos los campos no sean nulos.

Si queremos implementar reglas adicionales como verificar la longitud de una cadena o verificar si un número está dentro de un rango determinado, podemos definir validadores personalizados. La lógica de validación personalizada será parte de la función de resolución. Entendamos esto con la ayuda de un ejemplo.

Ilustración: Implementación de validadores personalizados

Creemos un formulario de registro con validación básica. El formulario tendrá campos de correo electrónico, nombre y contraseña.

Paso 1: descargue e instale las dependencias necesarias para el proyecto

Crea una carpeta llamada validation-app. Cambie el directorio a validation-app desde la terminal. Siga los pasos 3 a 5 explicados en el capítulo Configuración del entorno.

Paso 2: crea un esquema

Añadir schema.graphql archivo en la carpeta del proyecto validation-app y agregue el siguiente código -

type Query {
   greeting:String
}

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

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

Note- Podemos usar el tipo de entrada SignUpInput para reducir el número de parámetros en la función SignUp. Entonces, la función signUp toma solo un parámetro de tipo SignUpInput.

Paso 3: crear resolutores

Crea un archivo resolvers.js en la carpeta del proyecto y agregue el siguiente código:

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 función de resolución, signUp acepta parámetros de correo electrónico, contraseña y nombre. Estos se pasarán a través de la variable de entrada para que se pueda acceder a ellos a través de args.input.

Paso 4: ejecutar la aplicación

Cree un archivo server.js. Consulte el paso 8 del capítulo Configuración del entorno. Ejecute el comando npm start en la terminal. El servidor estará funcionando en el puerto 9000. Aquí, usaremos GraphiQL como cliente para probar la aplicación.

Abra el navegador e ingrese la URL http://localhost:9000/graphiql. Escriba la siguiente consulta en el editor:

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

Dado que la función de entrada a registro es un tipo complejo, necesitamos usar variables de consulta en graphiql. Para esto, primero debemos darle un nombre a la consulta y llamarla doSignUp, la entrada $ es una variable de consulta.

La siguiente variable de consulta debe ingresarse en la pestaña de variables de consulta de graphiql -

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

La matriz de errores contiene los detalles de los errores de validación como se muestra a continuación:

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

Tenemos que ingresar una entrada adecuada para cada campo como se indica a continuación:

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

La respuesta es la siguiente:

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

Aquí, en la consulta a continuación, no estamos asignando ninguna contraseña.

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

Si no se proporciona un campo obligatorio, el servidor qraphql mostrará el siguiente error:

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