GraphQL - Проверка

При добавлении или изменении данных важно проверять вводимые пользователем данные. Например, нам может потребоваться убедиться, что значение поля всегда не равно нулю. Мы можем использовать! (non-nullable) введите маркер в GraphQL для выполнения такой проверки.

Синтаксис для использования ! маркер типа приведен ниже -

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

Приведенный выше синтаксис гарантирует, что все поля не равны нулю.

Если мы хотим реализовать дополнительные правила, такие как проверка длины строки или проверка того, находится ли число в заданном диапазоне, мы можем определить настраиваемые валидаторы. Пользовательская логика проверки будет частью функции преобразователя. Разберемся в этом на примере.

Иллюстрация - Реализация пользовательских валидаторов

Давайте создадим форму регистрации с базовой проверкой. В форме будут поля для электронной почты, имени и пароля.

Шаг 1 - Загрузите и установите необходимые зависимости для проекта

Создайте папку с именем validation-app. Измените каталог на приложение проверки с терминала. Выполните шаги с 3 по 5, описанные в главе «Настройка среды».

Шаг 2 - Создайте схему

Добавить schema.graphql файл в папке проекта validation-app и добавьте следующий код -

type Query {
   greeting:String
}

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

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

Note- Мы можем использовать тип ввода SignUpInput, чтобы уменьшить количество параметров в функции signUp. Итак, функция signUp принимает только один параметр типа SignUpInput.

Шаг 3 - Создайте преобразователи

Создать файл resolvers.js в папке проекта и добавьте следующий код -

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}

Функция распознавателя signUp принимает параметры email, пароль и firstName. Они будут переданы через входную переменную, чтобы к ней можно было получить доступ через args.input.

Шаг 4 - Запустите приложение

Создайте файл server.js. См. Шаг 8 в главе «Настройка среды». Выполните в терминале команду npm start . Сервер будет работать на 9000 порте. Здесь мы будем использовать GraphiQL в качестве клиента для тестирования приложения.

Откройте браузер и введите URL http://localhost:9000/graphiql. Введите в редакторе следующий запрос -

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

Поскольку входные данные для функции регистрации являются сложным типом, нам нужно использовать переменные запроса в graphiql. Для этого нам нужно сначала дать имя запросу и вызвать его doSignUp, $ input - это переменная запроса.

Следующая переменная запроса должна быть введена на вкладке переменных запроса в graphiql -

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

Массив ошибок содержит подробную информацию об ошибках проверки, как показано ниже -

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

Мы должны ввести правильный ввод для каждого поля, как указано ниже -

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

Ответ следующий -

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

Здесь, в запросе ниже, мы не назначаем пароль.

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

Если обязательное поле не указано, то сервер qraphql отобразит следующую ошибку:

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