[TOC]

node中间件开发：使用apollo-server和graphQL在KOA项目中搭建graphQL服务

中间件作为前端和后端数据交互的桥梁，很好地解决了后端修改数据结构麻烦和前端对字段结构需求不断变更之间的矛盾问题。它可以有多种处理方式，本次因为是由前端开发中间件因此选择了node作为开发语言。

graphQL介绍

GraphQL 是一个用于 API 的查询语言，是一个使用基于类型系统来执行查询的服务端运行时（类型系统由你的数据定义）。GraphQL 并没有和任何特定数据库或者存储引擎绑定，而是依靠你现有的代码和数据支撑。

GraphQL 入门

• GraphQL schema
• 每一个 GraphQL 服务都有一个 query 类型，可能有一个 mutation 类型。
• 标量类型（Scalar Types） 它们表示对应 GraphQL 查询的叶子节点
  GraphQL 自带一组默认标量类型：
  Int：有符号 32 位整数。
  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,
    }
`);

当用作数据交互处理时中间件处理流程

image

中间件承担了前后端代码中的一些脏活累活，把两边开发人员都不乐意处理的一些逻辑放在这里面处理。后端只需要输出数据，前端只要取到自己想要的数据就可以--从这一点上来看中间件就是开了一个新的项目专用于整理后端返回的数据。

使用js处理数据的优缺点

如上文说的，要实现后端数据结构的重组，仅仅依靠JavaScript就可以实现了:
在一个新的js项目(暂时叫它 data_handler)中定义好请求的接口和数据结构，将请求后端得到的数据按照定义好的数据结构整理一遍再暴露给调用的项目

在真实的业务项目中调用data_handler暴露出来的方法获取数据

使用js来处理数据一大优点便是灵活、开发成本低：说白了就是做一次项目的拆分

而缺点便是拆分出来的项目只适用于原项目，失去了对相同接口的复用--比如同一个获取用户列表的接口，如果另一个项目也需要获取用户列表但需要不用的数据结构，那么当前封装好的方法就不适用了

使用node搭建中间件处理数据的优缺点

而由node来处理数据则完全是在原来的前端项目之外又假设了一层项目了；前端的请求发向node层，再由node层做相应的处理--向后端请求数据或从数据库、缓存中取数据返回

使用node进行搭建中间件相比于用js单纯做数据处理优点非常明显：

• node具有访问数据库的能力，因此一些简单的业务可以迁移到中间件中进行而不用等待后端介入
• 作为“真正的”中间件它可以整合前后端的请求，比如一个页面需要请求后端多个接口，那么可以在中间件中将这些接口数据整合到一起发送给前端，减少前端的请求次数
• 当作为中间件时还可以实现诸如服务端渲染、页面缓存、请求缓存之类提升页面加载速度的功能

但缺点同样存在：增加了开发成本，而且同js处理数据一般node中间件也需要对不同的项目做特别的处理

引入graphQL让前端做查询

可以发现上文介绍的两种方法都不能满足一次编码前端多个项目对相同接口不同数据结构的需求，引入graphQL给予前端查询、筛选数据的能力。服务端/中间件只要输出数据，不用关心前端需要的数据结构；而前端只要按照graphQL语法从返回数据中查询出自己需要的数据和结构，无需关心后端返回的数据结构。

在KOA项目中使用apollo-server和graphQL在KOA项目中搭建graphQL服务

现有的中间件项目是基于KOA开发的，因此本次graphQL服务也是在KOA上搭建。
整体的技术栈是 KOA + apollo-server + graphql-js

使用KOA就不多说了，因为项目搭建时用的就是KOA。

使用 apollo-server 是因为它为常见的node框架如express、KOA等都实现了graphQL服务;而且还有相应的客户端 apollo-client，支持非常多主流的前端框架如react、VUE等，甚至安卓和IOS客户端都有相应的代码实现，社区生态好解决方案完整。具体可以见他们的主页 Apollo GraphQL
。

其实一个 apollo-server 就足够完成graphQL服务的搭建，但在项目中还额外引入了 GraphQL.js ，原因是使用它来构建可读性更高、适用性更强的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 ...

代码实现

项目文件结构大概是

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

入口文件server.ts中引入 apollo-server-koa 并创建一个 ApolloServer 应用到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 可以支持不同的传参构建，比如上面代码传入 typeDefs, resolvers 由ApolloServer再去构建schema:

_apollo-server-core@2.1.0@apollo-server-core\src\apolloserver.ts

apolloserver.ts

makeExecutableSchema方法最终还是调用了

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

本次开发中采用了第二种直接传入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服务并应用到KOA中
const apolloServer = new ApolloServer({
  schema
});
apolloServer.applyMiddleware({ app });

server\graphQLSchema\index.ts 构建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 查询返回数据的类型声明及调用的方法

'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 声明返回数据具体的结构

'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的服务，接收客户端的请求并将其转发到服务端，将服务端返回的数据以graphQL的服务形式提供给客户端做查询。当然也可以从数据库或其它地方获取到数据，在getChildModuleData方法中做相应处理即可。
时间仓促仅能跑起一个查询的小demo，代码中有纰漏还请大家指正。