共计 2061 个字符，预计需要花费 6 分钟才能阅读完成。
在之前翻译的一篇文章为什么我们在 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…
