GraphQL-検証

データを追加または変更するときは、ユーザー入力を検証することが重要です。たとえば、フィールドの値が常にnullでないことを確認する必要がある場合があります。 *を使用できます！（null不可）*このような検証を実行するためのGraphQLのタイプマーカー。

！*タイプマーカーを使用するための構文は以下のとおりです-

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

上記の構文は、すべてのフィールドがnullでないことを保証します。

文字列の長さをチェックしたり、数値が特定の範囲内にあるかどうかをチェックするなどの追加のルールを実装する場合は、カスタムバリデーターを定義できます。カスタム検証ロジックは、リゾルバー関数の一部になります。例の助けを借りてこれを理解しましょう。

図-カスタムバリデーターの実装

基本的な検証を行ったサインアップフォームを作成しましょう。フォームには、メール、名、およびパスワードのフィールドがあります。

ステップ1-プロジェクトに必要な依存関係をダウンロードしてインストールする

*validation-app* という名前のフォルダーを作成します。 ターミナルからディレクトリを「検証アプリ」に変更します。 環境設定の章で説明されている手順3〜5に従います。

ステップ2-スキーマを作成する

プロジェクトフォルダーに schema.graphql ファイルを追加します

type Query {
   greeting:String
}

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

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

注-signUpInputの入力タイプを使用して、signUp関数のパラメーターの数を減らすことができます。したがって、signUp関数は、SignUpInput型のパラメーターを1つだけ受け取ります。

ステップ3-リゾルバーを作成する

プロジェクトフォルダにファイル resolvers.js を作成し、次のコードを追加します-

const Query = {
   greeting:() => "Hello"
}

const Mutation ={
   signUp:(root,args,context,info) => {

      const {email,firstName,password} = args.input;

      const emailExpression =/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[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」、「password」、「firstName」を受け入れます。これらはargs.inputを通じてアクセスできるように、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
            }
         ]
      }
   ]
}

Graphql-validation

目次