GraphQL-검증

데이터를 추가하거나 수정하는 동안 사용자 입력을 확인하는 것이 중요합니다. 예를 들어 필드 값이 항상 null이 아닌지 확인해야 할 수 있습니다. 우리는 사용할 수 있습니다! (non-nullable) GraphQL에 마커를 입력하여 이러한 유효성 검사를 수행합니다.

사용 구문 ! 유형 마커는 다음과 같습니다.

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

위의 구문은 모든 필드가 널이 아닌지 확인합니다.

문자열 길이를 확인하거나 숫자가 주어진 범위 내에 있는지 확인하는 것과 같은 추가 규칙을 구현하려면 사용자 지정 유효성 검사기를 정의 할 수 있습니다. 사용자 지정 유효성 검사 논리는 리졸버 기능의 일부가됩니다. 예제의 도움으로 이것을 이해합시다.

그림-사용자 지정 유효성 검사기 구현

기본 유효성 검사가 포함 된 가입 양식을 만들어 보겠습니다. 양식에는 이메일, 이름 및 비밀번호 필드가 있습니다.

1 단계-프로젝트에 필요한 종속성 다운로드 및 설치

다음과 같은 폴더를 만듭니다. validation-app. 터미널에서 디렉터리를 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− signUp 함수의 매개 변수 수를 줄이기 위해 입력 유형 SignUpInput을 사용할 수 있습니다. 따라서 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은 매개 변수 이메일, 비밀번호 및 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
            }
         ]
      }
   ]
}