[TOC]
node中間件開發(fā)：使用apollo-server和graphQL在KOA項(xiàng)目中搭建graphQL服務(wù)
中間件作為前端和后端數(shù)據(jù)交互的橋梁撞反，很好地解決了后端修改數(shù)據(jù)結(jié)構(gòu)麻煩和前端對(duì)字段結(jié)構(gòu)需求不斷變更之間的矛盾問(wèn)題。它可以有多種處理方式搪花，本次因?yàn)槭怯汕岸碎_發(fā)中間件因此選擇了node作為開發(fā)語(yǔ)言遏片。
graphQL介紹
GraphQL 是一個(gè)用于 API 的查詢語(yǔ)言嘹害，是一個(gè)使用基于類型系統(tǒng)來(lái)執(zhí)行查詢的服務(wù)端運(yùn)行時(shí)（類型系統(tǒng)由你的數(shù)據(jù)定義）。GraphQL 并沒(méi)有和任何特定數(shù)據(jù)庫(kù)或者存儲(chǔ)引擎綁定吮便，而是依靠你現(xiàn)有的代碼和數(shù)據(jù)支撐笔呀。
- GraphQL schema
- 每一個(gè) GraphQL 服務(wù)都有一個(gè) query 類型，可能有一個(gè) mutation 類型髓需。
- 標(biāo)量類型（Scalar Types） 它們表示對(duì)應(yīng) GraphQL 查詢的葉子節(jié)點(diǎn)
GraphQL 自帶一組默認(rèn)標(biāo)量類型：
Int：有符號(hào) 32 位整數(shù)许师。
Float：有符號(hào)雙精度浮點(diǎn)值。
String：UTF‐8 字符序列僚匆。
Boolean：true 或者 false微渠。
ID：ID 標(biāo)量類型表示一個(gè)唯一標(biāo)識(shí)符，通常用以重新獲取對(duì)象或者作為緩存中的鍵咧擂。ID 類型使用和 String 一樣的方式序列化逞盆；然而將其定義為 ID 意味著并不需要人類可讀型。
const recentQueryCarsSchema = buildSchema(`
type Book {
title: String
author: String
}
type Query {
books: [Book],
hello: String,
myName: Int,
}
`);
當(dāng)用作數(shù)據(jù)交互處理時(shí)中間件處理流程
中間件承擔(dān)了前后端代碼中的一些臟活累活松申，把兩邊開發(fā)人員都不樂(lè)意處理的一些邏輯放在這里面處理云芦。后端只需要輸出數(shù)據(jù)，前端只要取到自己想要的數(shù)據(jù)就可以--從這一點(diǎn)上來(lái)看中間件就是開了一個(gè)新的項(xiàng)目專用于整理后端返回的數(shù)據(jù)贸桶。
使用js處理數(shù)據(jù)的優(yōu)缺點(diǎn)
如上文說(shuō)的舅逸，要實(shí)現(xiàn)后端數(shù)據(jù)結(jié)構(gòu)的重組，僅僅依靠JavaScript就可以實(shí)現(xiàn)了:
在一個(gè)新的js項(xiàng)目(暫時(shí)叫它 data_handler)中定義好請(qǐng)求的接口和數(shù)據(jù)結(jié)構(gòu)刨啸，將請(qǐng)求后端得到的數(shù)據(jù)按照定義好的數(shù)據(jù)結(jié)構(gòu)整理一遍再暴露給調(diào)用的項(xiàng)目
在真實(shí)的業(yè)務(wù)項(xiàng)目中調(diào)用data_handler暴露出來(lái)的方法獲取數(shù)據(jù)
使用js來(lái)處理數(shù)據(jù)一大優(yōu)點(diǎn)便是靈活堡赔、開發(fā)成本低：說(shuō)白了就是做一次項(xiàng)目的拆分
而缺點(diǎn)便是拆分出來(lái)的項(xiàng)目只適用于原項(xiàng)目，失去了對(duì)相同接口的復(fù)用--比如同一個(gè)獲取用戶列表的接口设联，如果另一個(gè)項(xiàng)目也需要獲取用戶列表但需要不用的數(shù)據(jù)結(jié)構(gòu)善已，那么當(dāng)前封裝好的方法就不適用了
使用node搭建中間件處理數(shù)據(jù)的優(yōu)缺點(diǎn)
而由node來(lái)處理數(shù)據(jù)則完全是在原來(lái)的前端項(xiàng)目之外又假設(shè)了一層項(xiàng)目了；前端的請(qǐng)求發(fā)向node層离例，再由node層做相應(yīng)的處理--向后端請(qǐng)求數(shù)據(jù)或從數(shù)據(jù)庫(kù)换团、緩存中取數(shù)據(jù)返回
使用node進(jìn)行搭建中間件相比于用js單純做數(shù)據(jù)處理優(yōu)點(diǎn)非常明顯：
- node具有訪問(wèn)數(shù)據(jù)庫(kù)的能力，因此一些簡(jiǎn)單的業(yè)務(wù)可以遷移到中間件中進(jìn)行而不用等待后端介入
- 作為“真正的”中間件它可以整合前后端的請(qǐng)求宫蛆，比如一個(gè)頁(yè)面需要請(qǐng)求后端多個(gè)接口艘包，那么可以在中間件中將這些接口數(shù)據(jù)整合到一起發(fā)送給前端，減少前端的請(qǐng)求次數(shù)
- 當(dāng)作為中間件時(shí)還可以實(shí)現(xiàn)諸如服務(wù)端渲染耀盗、頁(yè)面緩存想虎、請(qǐng)求緩存之類提升頁(yè)面加載速度的功能
但缺點(diǎn)同樣存在：增加了開發(fā)成本，而且同js處理數(shù)據(jù)一般node中間件也需要對(duì)不同的項(xiàng)目做特別的處理
引入graphQL讓前端做查詢
可以發(fā)現(xiàn)上文介紹的兩種方法都不能滿足一次編碼前端多個(gè)項(xiàng)目對(duì)相同接口不同數(shù)據(jù)結(jié)構(gòu)的需求叛拷，引入graphQL給予前端查詢舌厨、篩選數(shù)據(jù)的能力。服務(wù)端/中間件只要輸出數(shù)據(jù)忿薇，不用關(guān)心前端需要的數(shù)據(jù)結(jié)構(gòu)裙椭；而前端只要按照graphQL語(yǔ)法從返回?cái)?shù)據(jù)中查詢出自己需要的數(shù)據(jù)和結(jié)構(gòu)躏哩，無(wú)需關(guān)心后端返回的數(shù)據(jù)結(jié)構(gòu)。
在KOA項(xiàng)目中使用apollo-server和graphQL在KOA項(xiàng)目中搭建graphQL服務(wù)
現(xiàn)有的中間件項(xiàng)目是基于KOA開發(fā)的揉燃，因此本次graphQL服務(wù)也是在KOA上搭建扫尺。
整體的技術(shù)棧是 KOA + apollo-server + graphql-js
使用KOA就不多說(shuō)了，因?yàn)轫?xiàng)目搭建時(shí)用的就是KOA炊汤。
使用 apollo-server 是因?yàn)樗鼮槌Ｒ姷膎ode框架如express正驻、KOA等都實(shí)現(xiàn)了graphQL服務(wù);而且還有相應(yīng)的客戶端 apollo-client，支持非常多主流的前端框架如react婿崭、VUE等拨拓，甚至安卓和IOS客戶端都有相應(yīng)的代碼實(shí)現(xiàn)肴颊，社區(qū)生態(tài)好解決方案完整氓栈。具體可以見他們的主頁(yè) Apollo GraphQL
。
其實(shí)一個(gè) apollo-server 就足夠完成graphQL服務(wù)的搭建婿着，但在項(xiàng)目中還額外引入了 GraphQL.js 授瘦，原因是使用它來(lái)構(gòu)建可讀性更高、適用性更強(qiáng)的GraphQL schema竟宋。
While we recommend the use schema-definition language (SDL) for defining a GraphQL schema since we feel it's more human-readable and language-agnostic, Apollo Server can be configured with a GraphQLSchema object ...
代碼實(shí)現(xiàn)
項(xiàng)目文件結(jié)構(gòu)大概是
server
└─ server.ts //入口配置文件
└─ graphQLSchema //用于定義graphQL的schema及操作方法
└─ model //實(shí)際做的操作
入口文件server.ts中引入 apollo-server-koa 并創(chuàng)建一個(gè) ApolloServer 應(yīng)用到KOA實(shí)例中提完。見官方文檔：
// Construct a schema, using GraphQL schema language
const typeDefs = gql`
type Query {
hello: String
}
`;
// Provide resolver functions for your schema fields
const resolvers = {
Query: {
hello: () => 'Hello world!',
},
};
const server = new ApolloServer({ typeDefs, resolvers });
const app = new Koa();
server.applyMiddleware({ app });
ApolloServer 可以支持不同的傳參構(gòu)建，比如上面代碼傳入 typeDefs, resolvers 由ApolloServer再去構(gòu)建schema:
_apollo-server-core@2.1.0@apollo-server-core\src\apolloserver.ts
makeExecutableSchema方法最終還是調(diào)用了
graphql\type\schema.d.ts
因此我們也可以直接傳入一個(gè)schema丘侠，文檔中同樣有說(shuō)明：
const { ApolloServer, gql } = require('apollo-server');
const { GraphQLSchema, GraphQLObjectType, GraphQLString } = require('graphql');
// The GraphQL schema
const schema = new GraphQLSchema({
query: new GraphQLObjectType({
name: 'Query',
fields: {
hello: {
type: GraphQLString,
description: 'A simple type for getting started!',
resolve: () => 'world',
},
},
}),
});
const server = new ApolloServer({ schema });
本次開發(fā)中采用了第二種直接傳入schema的方式徒欣，做了一些模塊的拆分：
server.ts
// graphQL server
import { ApolloServer } from 'apollo-server-koa';
// graphQL schema
import schema from './graphQLSchema'
const app = new Koa();
const router = new Router();
// 生成一個(gè)graphQL服務(wù)并應(yīng)用到KOA中
const apolloServer = new ApolloServer({
schema
});
apolloServer.applyMiddleware({ app });
server\graphQLSchema\index.ts 構(gòu)建ApolloServer的schema
'use strict';
import {
GraphQLObjectType,
GraphQLSchema,
} from 'graphql';
import { sth } from './childModule';
// graphQL的入口文件，引入各個(gè)查詢的對(duì)象
const schema = new GraphQLSchema({
query: new GraphQLObjectType({
name: 'Query',
fields: {
sth,
},
})
});
export default schema;
server\graphQLSchema\childModule\index.ts 查詢返回?cái)?shù)據(jù)的類型聲明及調(diào)用的方法
'use strict';
import { GraphQLList, GraphQLString } from 'graphql';
import { childModuleSchema} from './schema';
import { getChildModuleData} from '../../model/childModule';
export const recentQueryCarsList = {
type: new GraphQLList(childModuleSchema),
args: {
token: { type: GraphQLString }
},
async resolve(source: any, args: any) {
const token = args.token || '';
if (!token) {
return [];
}
return await getChildModuleData(token);
}
}
server\graphQLSchema\childModule\schema.ts 聲明返回?cái)?shù)據(jù)具體的結(jié)構(gòu)
'use strict';
import { GraphQLString, GraphQLObjectType, GraphQLInt } from 'graphql';
export const childModuleSchema= new GraphQLObjectType({
name: 'childModuleSchema',
description: 'childModuleSchema detail item',
fields: () => ({
name: {
type: GraphQLString,
},
age: {
type: GraphQLString,
},
height: {
type: GraphQLInt,
}
})
});
通過(guò)以上文件搭建一個(gè)graphQL的服務(wù)蜗字，接收客戶端的請(qǐng)求并將其轉(zhuǎn)發(fā)到服務(wù)端打肝，將服務(wù)端返回的數(shù)據(jù)以graphQL的服務(wù)形式提供給客戶端做查詢。當(dāng)然也可以從數(shù)據(jù)庫(kù)或其它地方獲取到數(shù)據(jù)挪捕，在getChildModuleData方法中做相應(yīng)處理即可粗梭。
時(shí)間倉(cāng)促僅能跑起一個(gè)查詢的小demo，代碼中有紕漏還請(qǐng)大家指正级零。
