GraphQL - walidacja

Podczas dodawania lub modyfikowania danych ważne jest, aby sprawdzić poprawność danych wejściowych użytkownika. Na przykład może być konieczne upewnienie się, że wartość pola zawsze nie jest zerowa. Możemy użyć! (non-nullable) znacznik typu w GraphQL, aby przeprowadzić taką walidację.

Składnia korzystania z ! znacznik typu jest taki, jak podano poniżej -

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

Powyższa składnia zapewnia, że ​​wszystkie pola nie są puste.

Jeśli chcemy zaimplementować dodatkowe reguły, takie jak sprawdzanie długości łańcucha lub sprawdzanie, czy liczba mieści się w podanym zakresie, możemy zdefiniować niestandardowe walidatory. Niestandardowa logika walidacji będzie częścią funkcji przelicznika. Zrozummy to na przykładzie.

Ilustracja - Wdrażanie niestandardowych walidatorów

Stwórzmy formularz rejestracyjny z podstawową walidacją. Formularz będzie zawierał pola e-mail, imię i hasło.

Krok 1 - Pobierz i zainstaluj wymagane zależności dla projektu

Utwórz folder o nazwie validation-app. Zmień katalog na validation-app z terminala. Wykonaj kroki od 3 do 5 opisane w rozdziale Konfiguracja środowiska.

Krok 2 - Utwórz schemat

Dodaj schema.graphql plik w folderze projektu validation-app i dodaj następujący kod -

type Query {
   greeting:String
}

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

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

Note- Możemy użyć typu wejścia SignUpInput, aby zmniejszyć liczbę parametrów w funkcji signUp. Tak więc funkcja signUp przyjmuje tylko jeden parametr typu SignUpInput.

Krok 3 - Utwórz resolwery

Utwórz plik resolvers.js w folderze projektu i dodaj następujący kod -

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}

Funkcja resolver, signUp akceptuje parametry e-mail, hasło i imię. Zostaną one przekazane przez zmienną wejściową, aby można było uzyskać do nich dostęp przez args.input.

Krok 4 - Uruchom aplikację

Utwórz plik server.js. Zapoznaj się z krokiem 8 w rozdziale Konfiguracja środowiska. Wykonaj polecenie npm start w terminalu. Serwer będzie działał na porcie 9000. Tutaj użyjemy GraphiQL jako klienta do przetestowania aplikacji.

Otwórz przeglądarkę i wprowadź adres URL http://localhost:9000/graphiql. Wpisz następujące zapytanie w edytorze -

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

Ponieważ wejście do funkcji rejestracji jest typem złożonym, musimy użyć zmiennych zapytania w graphiql. W tym celu musimy najpierw nadać zapytaniu nazwę i nazwać je doSignUp, $ input jest zmienną zapytania.

Następującą zmienną zapytania należy wprowadzić w zakładce zmienne zapytania w graphiql -

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

Tablica błędów zawiera szczegóły błędów walidacji, jak pokazano poniżej -

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

Musimy wprowadzić odpowiednie dane wejściowe dla każdego pola, jak podano poniżej -

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

Odpowiedź jest następująca -

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

Tutaj w poniższym zapytaniu nie przypisujemy żadnego hasła.

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

Jeśli wymagane pole nie zostanie podane, serwer qraphql wyświetli następujący błąd -

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