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...