GraphQL - 驗證

上一頁
下一頁

在新增或修改資料時，驗證使用者輸入非常重要。例如，我們可能需要確保欄位的值始終不為空。我們可以使用 GraphQL 中的! (非空)型別標記來執行此類驗證。

使用!型別標記的語法如下所示：

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

上述語法確保所有欄位都不為空。

如果我們想實現其他規則，例如檢查字串長度或檢查數字是否在給定範圍內，我們可以定義自定義驗證器。自定義驗證邏輯將是解析器函式的一部分。讓我們透過一個示例來理解這一點。

圖解 - 實現自定義驗證器

讓我們建立一個帶有基本驗證的登錄檔單。該表單將包含電子郵件、名字和密碼欄位。

步驟 1 - 下載並安裝專案所需的依賴項

建立一個名為validation-app的資料夾。從終端將目錄更改為validation-app。按照環境設定章節中解釋的步驟 3 到 5 進行操作。

步驟 2 - 建立模式

在專案資料夾validation-app中新增schema.graphql檔案，並新增以下程式碼：

type Query {
   greeting:String
}

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

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

注意 - 我們可以使用輸入型別 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、password 和 firstName。這些將透過 input 變數傳遞，以便可以透過 args.input 訪問它們。

步驟 4 - 執行應用程式

建立一個 server.js 檔案。參考環境設定章節中的步驟 8。在終端中執行命令npm start。伺服器將在 9000 埠啟動並執行。在這裡，我們將使用 GraphiQL 作為客戶端來測試應用程式。

開啟瀏覽器並輸入 URL https://:9000/graphiql。在編輯器中鍵入以下查詢：

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

由於 signup 函式的輸入是一個複雜型別，我們需要在 graphiql 中使用查詢變數。為此，我們需要首先為查詢命名並將其稱為 doSignUp，$input 是一個查詢變數。

必須在 graphiql 的查詢變數選項卡中輸入以下查詢變數：

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

errors 陣列包含驗證錯誤的詳細資訊，如下所示：

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

我們必須為每個欄位輸入正確的輸入，如下所示：

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

響應如下：

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

在這裡，在下面的查詢中，我們沒有分配任何密碼。

{
   "input":{
      "email": "abc@abc.com",
      "firstName": "kannan"
   }
}

如果未提供必需的欄位，則 qraphql 伺服器將顯示以下錯誤：

{
   "errors": [
      {
         "message": "Variable \"$input\" got invalid value {\"email\":\"abc@abc.com\",\"firstName\":\"kannan\"}; Field value.password of required type String! was not provided.",
         "locations": [
            {
               "line": 1,
               "column": 19
            }
         ]
      }
   ]
}
列印頁面
上一頁
下一頁
廣告