GraphQL 在 koa 框架中的实践

在之前翻译的一篇文章 为什么我们在 API 中使用 GraphQL 中介绍 GraphQL 的作用，之后笔者在 Koa 框架中实现相关接口及调用方式并整理相关实现过程，希望对如笔者一样想要使用 GraphQL 的入门者一些帮助。

由于笔者日常工作开发中使用的Node 后台框架是 Koa,因此就以此框架为基础实现 /graphql 接口，接下来会分步介绍实现的步骤与方法。

路由配置

建立一个路由配置,笔者使用的框架对路由进行封装，只要在指定文件下新建graphql.ts文件夹即可，以下是使用 koa-router 的写法:

router.get('/graphql', async (ctx, next) => {
// do something...
})

数据定义

引入 js 实现 GraphQL 相关模块 graphql，其定义一套数据类型，用于描述我们能从服务查询到的数据，比如 graphql 定义 GraphQLObjectType 、 GraphQLString, GraphQLID, GraphQLList 等相关类型,本次接口需要返回设备基本信息列表，以下是本次接口查询定义的对象

import { GraphQLObjectType, GraphQLString, GraphQLID, GraphQLList, GraphQLNonNull } from 'graphql';
/**
*device.js
*/
//id、 baseSn 、 baseWifi 均为数据库中字段
let DeviceType = new GraphQLObjectType({
   name: 'Device',
   fields: {
       id: {
           type: GraphQLID
       },
       baseSn: {
           type: GraphQLString 
       },
       baseWifi: {
           type: GraphQLString
       }
   }
})

export const devices = {
   type: new GraphQLList(DeviceType)
}

实现 GraphQL 查询入口

1. 定义查询参数和数据来源

前面定义数据的结构和类型，接下来就看一下如何定义数据来源和数据类型:

export const devices = {
    type: new GraphQLList(DeviceType),
    args: { 
        baseSn: {
            type: new GraphQLNonNull(GraphQLString)
        } 
    },
    resolve(root, params, options) {
        return getList({params}).then((data) => { 
            return data[0]
        })
        //the result of th getList function:
        /**
        * [total, devices]
        * [1, [
            {
            baseSn, 
            basWifi, 
            id ...}
        ]
        */
    }
}

在device.js devices 对象中添加 args 属性，定义 baseSn 为查询条件，在 resolve
中调用数据查询函数作为 devices 的返回结果。

2. 定义查询入口

GraphQL 服务定义大部分都是普通对象类型，但是一个 schema 内定义两个特殊类型:

schema {
   query: Query
   mutation: Mutation
}

每个 GraphQL 都会定义一个 query 类型作为查询入口，也会定义 mutation 定义更改操作的接口。

// schema.js
import { GraphQLSchema, GraphQLObjectType } from 'graphql';
import { devices } from './device.js'

export default new GraphQLSchema({
    query: new GraphQLObjectType({
        name: 'Query',
        fields: {
            devices
            // you can define other data here
        }
    })
    //mutation: ...
})

3.在 Koa 中实现

//router.js 
import { graphqlKoa} from 'graphql-server-koa'
import schema from './schema.js'

router.get('/graphal', async (ctx, next) => {
    await graphqlKoa({ schema: schema })(ctx, next)
    //...
 })

前端接口调用

前端使用 jQuery.ajax 进行调用，GraphQL 查询请求与返回的数据结构类似，在查询语句中指定需要查询的字段，比如下列查询中指定 baseSn, baseWifi 两个字段，则会在结果中返回这两个字段而没有 id 字段。

$.ajax({
 url:  '**/graphql',
  data: {
   query: `query {
     devices (baseSn: "**"){
       baseSn,
       baseWifi  
     }
   }`
 }


/*results
"data": {
   "devices": [
   {
   "baseSn": "*****************",
   "baseWifi": "***"
   }
   ]
} 
*/

参考文献

[1] GraphQL 官网

[2] https://github.com/graphql/gr...