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

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

路由配置

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

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

数据定义

引入 js 实现 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

2. 定义查询入口

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

schema {   query: Query   mutation: Mutation}

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

// schema.jsimport { 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]

[2]