GraphQL - Validação

Ao adicionar ou modificar dados, é importante validar a entrada do usuário. Por exemplo, podemos precisar garantir que o valor de um campo não seja sempre nulo. Podemos usar! (non-nullable) digite o marcador no GraphQL para realizar essa validação.

A sintaxe para usar o ! o marcador de tipo é conforme abaixo -

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

A sintaxe acima garante que todos os campos não sejam nulos.

Se quisermos implementar regras adicionais, como verificar o comprimento de uma string ou se um número está dentro de um determinado intervalo, podemos definir validadores personalizados. A lógica de validação personalizada fará parte da função de resolução. Vamos entender isso com a ajuda de um exemplo.

Ilustração - Implementando Validadores Customizados

Vamos criar um formulário de inscrição com validação básica. O formulário terá campos de e-mail, nome e senha.

Etapa 1 - Baixe e instale as dependências necessárias para o projeto

Crie uma pasta chamada validation-app. Mude o diretório para validation-app no ​​terminal. Siga as etapas 3 a 5 explicadas no capítulo Configuração do ambiente.

Etapa 2 - Criar um esquema

Adicionar schema.graphql arquivo na pasta do projeto validation-app e adicione o seguinte código -

type Query {
   greeting:String
}

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

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

Note- Podemos usar o tipo de entrada SignUpInput para reduzir o número de parâmetros na função de inscrição. Portanto, a função signUp leva apenas um parâmetro do tipo SignUpInput.

Etapa 3 - Criar resolvedores

Crie um arquivo resolvers.js na pasta do projeto e adicione o seguinte 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}

A função de resolução, signUp, aceita os parâmetros email, password e firstName. Eles serão passados ​​pela variável de entrada para que possam ser acessados ​​por meio de args.input.

Etapa 4 - Executar o aplicativo

Crie um arquivo server.js. Consulte a etapa 8 no capítulo Configuração de ambiente. Execute o comando npm start no terminal. O servidor estará instalado e funcionando na porta 9000. Aqui, usaremos GraphiQL como um cliente para testar o aplicativo.

Abra o navegador e digite o URL http://localhost:9000/graphiql. Digite a seguinte consulta no editor -

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

Como a entrada para a função de inscrição é um tipo complexo, precisamos usar variáveis ​​de consulta no graphiql. Para isso, precisamos primeiro dar um nome à consulta e chamá-la doSignUp, a $ input é uma variável de consulta.

A seguinte variável de consulta deve ser inserida na guia de variáveis ​​de consulta do Graphiql -

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

A matriz de erros contém os detalhes dos erros de validação, conforme mostrado abaixo -

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

Temos que inserir uma entrada adequada para cada campo conforme fornecido abaixo -

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

A resposta é a seguinte -

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

Aqui, na consulta abaixo, não estamos atribuindo nenhuma senha.

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

Se um campo obrigatório não for fornecido, o servidor qraphql exibirá o seguinte erro -

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