我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

GraphQL.js中,定义schema结构是非常重要的工作内容。在前几个例子中,苏南大叔都是采用默认的文本的形式定义这个schema的。其实,这个schemaroot的定义,还可以合并到一起,用传统的js的形式来定义。具体是如何使用jsschemaroot进行定义的呢?请参考本文的内容。

苏南大叔:GraphQL.js的schema,如何用js定义取代文本?如何接收返回数据? - graphql-schema-define-by-js
GraphQL.js的schema,如何用js定义取代文本?如何接收返回数据?(图10-1)

大家好,这里是苏南大叔的“程序如此灵动”博客,这里记录苏南大叔和计算机代码的故事。本文介绍在nodejsgraphql代码结合的时候,定义schema的有一种新的方式。本文测试环境:node@16.14.0graphql@16.3.0

如何发送和返回数据

GraphQL大概的流程就是:
schema(编写人员定义结构)=>query(调用人员传递参数)=>root/resolve(编写人员接收和返回匹配结果)。

苏南大叔:GraphQL.js的schema,如何用js定义取代文本?如何接收返回数据? - 流程图draw-dot-io
GraphQL.js的schema,如何用js定义取代文本?如何接收返回数据?(图10-2)

要查询(发送)的数据来自query:

对于查询的内容,大概就是这样:

执行的查询名称 ( 查询的字段名1:字段值1 , 查询的字段名2:字段值2 ) {
    返回的数据字段1
    返回的数据字段2
}

root/resolve来负责接收处理数据:

  • root的话,通过args来接收参数。
  • resolve的话,也是通过args来接收参数。但是,args是第二个参数。

苏南大叔:GraphQL.js的schema,如何用js定义取代文本?如何接收返回数据? - root和resolve
GraphQL.js的schema,如何用js定义取代文本?如何接收返回数据?(图10-3)

苏南大叔:GraphQL.js的schema,如何用js定义取代文本?如何接收返回数据? - 数据传递
GraphQL.js的schema,如何用js定义取代文本?如何接收返回数据?(图10-4)

数据发送返回实例

graphql程序的正确运行,需要定义两个部分:

  • 一部分是数据定义。schema,提供数据结构参考。由接口开发人员定义,由接口调用人员使用。
  • 另外一部分是数据处理。root/resolve,提供数据。由接口开发人员实现具体逻辑。

苏南大叔:GraphQL.js的schema,如何用js定义取代文本?如何接收返回数据? - 两个组成部分
GraphQL.js的schema,如何用js定义取代文本?如何接收返回数据?(图10-5)

本文范例的查询语句是:

{
  hello
  hi(name:"sunan")
  hola(name:"simon",id:8)
  bonjour(name:"sunan",id:5) {
    name
    title
  } 
}

查询结果是:

{
  "data": {
    "hello": "Hello world!",
    "hi": "hi sunan!",
    "hola": "¡Hola simon8!",
    "bonjour": {
      "name": "sunan",
      "title": "manager"
    }
  }
}

苏南大叔:GraphQL.js的schema,如何用js定义取代文本?如何接收返回数据? - 数据发送和接收
GraphQL.js的schema,如何用js定义取代文本?如何接收返回数据?(图10-6)

文本定义方案:SDL实体描述

苏南大叔:GraphQL.js的schema,如何用js定义取代文本?如何接收返回数据? - schema和root定义
GraphQL.js的schema,如何用js定义取代文本?如何接收返回数据?(图10-7)

下面是使用文本方式进行定义的schema例子:

type Query {
  hello: String,
  hi(name:String):String,
  hola(name:String,id:Int):String,
  bonjour(name:String,id:Int):human,
}
type human{
  name:String,
  title:String
  plus:String
}

这里的结构定义方法,GraphQL的官方说明如下:

下面是对应的root的例子:

{
  hello: () => 'Hello world!',
  hi: (args) => 'hi ' + args.name + '!',
  hola: (args) => '¡Hola ' + args.name + '' + args.id + '!',
  bonjour: (args) => {
    return { 'name':args.name,'id':args.id,'title':'manager','plus':'wonderful' }
  }
}

苏南大叔:GraphQL.js的schema,如何用js定义取代文本?如何接收返回数据? - schema和root分别定义
GraphQL.js的schema,如何用js定义取代文本?如何接收返回数据?(图10-8)

下面的文章中,是这种定义方式的例子。例如:

代码定义方案:使用js代码定义

个人觉文本形式定义不是很好,可能还会多一个遍历匹配解析的过程。这种直接使用后端相关语言直接定义的方式更好。
本方案中,需先导入GraphQL的各种常见数据类型。然后定义schema(字段的类型定义及root逻辑)。
也就是说,在本方案中,数据结构和数据处理,是合二为一的,并且root部分被描述为resolve

范例代码:

const {
  GraphQLSchema,
  GraphQLObjectType,
  GraphQLString,
  GraphQLInt,
  versionInfo
} = require('graphql');

const RootQueryType = new GraphQLObjectType({
    name: 'Query',
    description: 'Root Query',
    fields: () => ({
        hello: {
            type: GraphQLString,
            resolve() {
              return 'hello world';
            },
        },
        hi: {
            type: GraphQLString,
            description: 'hi query',
            args: {
              name: { type: GraphQLString }
            },
            resolve: (parent, args) => {
              return 'hi,' + args.name
            }
        },
        hola: {
            type: GraphQLString,
            description: 'hola query',
            args: {
              name: { type: GraphQLString },
              id: { type: GraphQLInt }
            },
            resolve: (parent, args) => {
              return '¡Hola ' + args.name + '' + args.id + '!'
            }
        },
        bonjour: {
          type: human,
          description: 'human bonjour',
          args: {
            id: { type: GraphQLInt },
            name: { type: GraphQLString }
          },
          resolve: (parent, args) => {
            return { id: args.id, name: args.name, title: "manager", plus:"plus" };
          }
        }
      })
});

const human = new GraphQLObjectType({
  name: 'human',
  description: 'human',
  fields: () => ({
      id: { type: GraphQLInt },
      name: { type: GraphQLString },
      title: { type: GraphQLString },
      plus: { type: GraphQLString },
  })
})

const schema = new GraphQLSchema({
    query: RootQueryType
})

代码说明:

  • 文本方式中的root定义里面,参数直接就是args
  • 代码方式定义里面的resolve定义里面,参数是parent,args
  • 传入graphqlHTTP的就只有一个schema,没有root

苏南大叔:GraphQL.js的schema,如何用js定义取代文本?如何接收返回数据? - schema定义方式
GraphQL.js的schema,如何用js定义取代文本?如何接收返回数据?(图10-9)

测试环境:koa@2.13.4koa-graphql@0.12.0koa-mount@4.0。完整代码:

newsn.net:这里是【评论】可见内容

相关文章:

在这里,

  • schema的类型定义,都被使用GraphQL字样进行了包装。比如:String变成了GraphQLString
  • root定义被打散编程了schemaresolve()部分了。

苏南大叔:GraphQL.js的schema,如何用js定义取代文本?如何接收返回数据? - 不用单独定义root了
GraphQL.js的schema,如何用js定义取代文本?如何接收返回数据?(图10-10)

相关文献

总结

苏南大叔目前不会详细阐述GraphQLSDL语言的逻辑,如果您熟悉一种后端语言的话,这些schema定义是非常简单的。为了苏南大叔的文章逻辑内容进化方向,GraphQL的内容可能还有几篇内容就要暂结了。

文本定义的方式,比较简单明了。代码定义的方式,比较复杂强大。总结:费脑细胞。

助理微信

微信打赏码

微信公众号

微信小程序

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   graphql