[TOC]

node中間件開發(fā)：使用apollo-server和graphQL在KOA項目中搭建graphQL服務(wù)

中間件作為前端和后端數(shù)據(jù)交互的橋梁，很好地解決了后端修改數(shù)據(jù)結(jié)構(gòu)麻煩和前端對字段結(jié)構(gòu)需求不斷變更之間的矛盾問題。它可以有多種處理方式，本次因為是由前端開發(fā)中間件因此選擇了node作為開發(fā)語言。

graphQL介紹

GraphQL 是一個用于 API 的查詢語言，是一個使用基于類型系統(tǒng)來執(zhí)行查詢的服務(wù)端運行時（類型系統(tǒng)由你的數(shù)據(jù)定義）。GraphQL 并沒有和任何特定數(shù)據(jù)庫或者存儲引擎綁定，而是依靠你現(xiàn)有的代碼和數(shù)據(jù)支撐。

GraphQL 入門

• GraphQL schema
• 每一個 GraphQL 服務(wù)都有一個 query 類型，可能有一個 mutation 類型。
• 標量類型（Scalar Types） 它們表示對應(yīng) GraphQL 查詢的葉子節(jié)點
  GraphQL 自帶一組默認標量類型：
  Int：有符號 32 位整數(shù)。
  Float：有符號雙精度浮點值。
  String：UTF‐8 字符序列。
  Boolean：true 或者 false。
  ID：ID 標量類型表示一個唯一標識符，通常用以重新獲取對象或者作為緩存中的鍵。ID 類型使用和 String 一樣的方式序列化；然而將其定義為 ID 意味著并不需要人類可讀型。

const recentQueryCarsSchema = buildSchema(`
    type Book {
        title: String
        author: String
    }
    type Query {
        books: [Book],
        hello: String,
        myName: Int,
    }
`);

當用作數(shù)據(jù)交互處理時中間件處理流程

image

中間件承擔了前后端代碼中的一些臟活累活，把兩邊開發(fā)人員都不樂意處理的一些邏輯放在這里面處理。后端只需要輸出數(shù)據(jù)，前端只要取到自己想要的數(shù)據(jù)就可以--從這一點上來看中間件就是開了一個新的項目專用于整理后端返回的數(shù)據(jù)。

使用js處理數(shù)據(jù)的優(yōu)缺點

如上文說的，要實現(xiàn)后端數(shù)據(jù)結(jié)構(gòu)的重組，僅僅依靠JavaScript就可以實現(xiàn)了:
在一個新的js項目(暫時叫它 data_handler)中定義好請求的接口和數(shù)據(jù)結(jié)構(gòu)，將請求后端得到的數(shù)據(jù)按照定義好的數(shù)據(jù)結(jié)構(gòu)整理一遍再暴露給調(diào)用的項目

在真實的業(yè)務(wù)項目中調(diào)用data_handler暴露出來的方法獲取數(shù)據(jù)

使用js來處理數(shù)據(jù)一大優(yōu)點便是靈活、開發(fā)成本低：說白了就是做一次項目的拆分

而缺點便是拆分出來的項目只適用于原項目，失去了對相同接口的復(fù)用--比如同一個獲取用戶列表的接口，如果另一個項目也需要獲取用戶列表但需要不用的數(shù)據(jù)結(jié)構(gòu)，那么當前封裝好的方法就不適用了

使用node搭建中間件處理數(shù)據(jù)的優(yōu)缺點

而由node來處理數(shù)據(jù)則完全是在原來的前端項目之外又假設(shè)了一層項目了；前端的請求發(fā)向node層，再由node層做相應(yīng)的處理--向后端請求數(shù)據(jù)或從數(shù)據(jù)庫、緩存中取數(shù)據(jù)返回

使用node進行搭建中間件相比于用js單純做數(shù)據(jù)處理優(yōu)點非常明顯：

• node具有訪問數(shù)據(jù)庫的能力，因此一些簡單的業(yè)務(wù)可以遷移到中間件中進行而不用等待后端介入
• 作為“真正的”中間件它可以整合前后端的請求，比如一個頁面需要請求后端多個接口，那么可以在中間件中將這些接口數(shù)據(jù)整合到一起發(fā)送給前端，減少前端的請求次數(shù)
• 當作為中間件時還可以實現(xiàn)諸如服務(wù)端渲染、頁面緩存、請求緩存之類提升頁面加載速度的功能

但缺點同樣存在：增加了開發(fā)成本，而且同js處理數(shù)據(jù)一般node中間件也需要對不同的項目做特別的處理

引入graphQL讓前端做查詢

可以發(fā)現(xiàn)上文介紹的兩種方法都不能滿足一次編碼前端多個項目對相同接口不同數(shù)據(jù)結(jié)構(gòu)的需求，引入graphQL給予前端查詢、篩選數(shù)據(jù)的能力。服務(wù)端/中間件只要輸出數(shù)據(jù)，不用關(guān)心前端需要的數(shù)據(jù)結(jié)構(gòu)；而前端只要按照graphQL語法從返回數(shù)據(jù)中查詢出自己需要的數(shù)據(jù)和結(jié)構(gòu)，無需關(guān)心后端返回的數(shù)據(jù)結(jié)構(gòu)。

在KOA項目中使用apollo-server和graphQL在KOA項目中搭建graphQL服務(wù)

現(xiàn)有的中間件項目是基于KOA開發(fā)的，因此本次graphQL服務(wù)也是在KOA上搭建。
整體的技術(shù)棧是 KOA + apollo-server + graphql-js

使用KOA就不多說了，因為項目搭建時用的就是KOA。

使用 apollo-server 是因為它為常見的node框架如express、KOA等都實現(xiàn)了graphQL服務(wù);而且還有相應(yīng)的客戶端 apollo-client，支持非常多主流的前端框架如react、VUE等，甚至安卓和IOS客戶端都有相應(yīng)的代碼實現(xiàn)，社區(qū)生態(tài)好解決方案完整。具體可以見他們的主頁 Apollo GraphQL
。

其實一個 apollo-server 就足夠完成graphQL服務(wù)的搭建，但在項目中還額外引入了 GraphQL.js ，原因是使用它來構(gòu)建可讀性更高、適用性更強的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 ...

代碼實現(xiàn)

項目文件結(jié)構(gòu)大概是

server
└─ server.ts  //入口配置文件
└─ graphQLSchema  //用于定義graphQL的schema及操作方法
└─ model  //實際做的操作

入口文件server.ts中引入 apollo-server-koa 并創(chuàng)建一個 ApolloServer 應(yīng)用到KOA實例中。見官方文檔：

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

apolloserver.ts

makeExecutableSchema方法最終還是調(diào)用了

graphql\type\schema.d.ts

graphql\type\schema.d.ts

graphql\type\schema.d.ts

因此我們也可以直接傳入一個schema，文檔中同樣有說明：

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();

// 生成一個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的入口文件，引入各個查詢的對象
const schema = new GraphQLSchema({
  query: new GraphQLObjectType({
    name: 'Query',
    fields: {
      sth,
    },
  })
});

export default schema;

server\graphQLSchema\childModule\index.ts 查詢返回數(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 聲明返回數(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,
        }
    })
});

通過以上文件搭建一個graphQL的服務(wù)，接收客戶端的請求并將其轉(zhuǎn)發(fā)到服務(wù)端，將服務(wù)端返回的數(shù)據(jù)以graphQL的服務(wù)形式提供給客戶端做查詢。當然也可以從數(shù)據(jù)庫或其它地方獲取到數(shù)據(jù)，在getChildModuleData方法中做相應(yīng)處理即可。
時間倉促僅能跑起一個查詢的小demo，代碼中有紕漏還請大家指正。