开发手册 欢迎您!
软件开发者资料库

GraphQL - 验证

GraphQL验证 - 从简单和简单的步骤学习GraphQL,从基本到高级概念,包括简介,环境设置,架构,应用程序组件,示例,类型系统,架构,解析器,查询,变异,验证,JQuery集成,React集成, Apollo客户端,身份验证客户端,缓存。

在添加或修改数据时,验证用户输入很重要.例如,我们可能需要确保字段的值始终不为空.我们可以用! (不可为空)在GraphQL中键入标记以执行此类验证.

使用类型标记的语法如下所示 :

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

上述语法确保所有字段都不为空.

如果我们想要实现其他规则,如检查字符串的长度或检查数字是否在给定范围内,我们可以定义自定义验证器.自定义验证逻辑将是解析器功能的一部分.让我们借助一个例子来理解这一点.

插图 - 实现自定义验证器

让我们创建一个带有基本验证的注册表单.表单将包含电子邮件,名字和密码字段.

第1步和第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类型的参数.

Step 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,密码和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"   }}

errors数组包含验证错误的详细信息,如下所示 :

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

我们必须输入正确的inpu每个字段的t如下所示 :

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