- GraphQL 教程
- GraphQL - 首页
- GraphQL - 简介
- GraphQL - 环境设置
- GraphQL - 架构
- GraphQL - 应用组件
- GraphQL - 示例
- GraphQL - 类型系统
- GraphQL - 模式
- GraphQL - 解析器
- GraphQL - 查询
- GraphQL - 突变
- GraphQL - 验证
- GraphQL - JQuery 集成
- GraphQL - React 集成
- GraphQL - Apollo Client
- GraphQL - 客户端身份验证
- GraphQL - 缓存
- GraphQL 有用资源
- GraphQL - 快速指南
- GraphQL - 有用资源
- GraphQL - 讨论
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://127.0.0.1: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": "[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 } ] } ] }