GraphQL 学习分享

这两天 CTO 向我安利了 GraphQL，说现在越来越多的项目在采用 GraphQL 模式开发，对客户端比较多样，需求变更比较快的产品很有帮助。

听人劝吃饱饭，所以我要赶紧学习一下。

什么是 GraphQL

GraphQL 不是一种实现方案，而是一个规范，是 facebook 倡导的一个规范，GraphQL 对 API 中的数据提供了一套易于理解的完整描述，使客户端能够准确地获得它需要的数据，而且没有任何冗余，也让 API 更容易地随着时间推移而演进，还能用于构建强大的开发者工具。

为什么要用 GraphQL

在接口开发的时候，我们经常会面临这些问题

1. 兼容多平台导致字段冗余
2. 一个页面需要多次调用 API 聚合数据
3. 需求经常改动导致接口很难为单一接口精简逻辑

以前为了解决这个问题，我们通常用下面的方式实现

提供多个接口

增加参数来实现

现在 GraphQL 可以让我们用更优雅的方式来实现

GraphQL 处理流程

如何实现  GraphQL

GraphQL 作为一种规范，已经有很多的技术框架可以快速实现，不论是 Java 、PHP 还是 JS。
作为前端开发，我自然首选 NodeJS + Express + Apollo GraphQL 来实现了

首先安装依赖包

npm install apollo-server-express
npm install graphal

然后添加引用，这里要特别注意，apollo-graphql 1.0 和 2.0 实现方式差异很大，网上的资料大部分都是基于 1.x 版本，我们默认安装的是最新版本，旧版实现方法会出错

var { ApolloServer, gql } = require('apollo-server-express');

声明 typeDefs，typeDefs 用来定义你的数据描述，描述决定了你可以如何通过请求获取数据
typeDefs 中有两个保留类型 Query / Mutation，这两个类型是 GraphQL 支持的两种请求(事实上还有第三种 subscriptions ，但是不常用)，Query 用于查询，Mutation 用于更新，类比 PUT / DELETE 

var typeDefs = gql`
  type Book {
     title: String
     author: String
  }
  type Query {
    books(id: Int): [Book]
  }
  type Mutation {
    add(title: String, author: String): Int
  }
  schema {
    query: Query
    mutation: Mutation
  }`;

然后再声明 resolvers，resolvers 是解析器，定义了 query / mutation 的具体实现

var resolvers = {
  Query: {
    books: function (parent, args, context, info) {
      return books;
    }
  },
  Mutation: {
    add: function (root, args, context) {
      //    这里是执行插入数据的方法
      return 0; // 0 表示成功
    }
  }
};

最后再注册服务

var server = new ApolloServer({ typeDefs, resolvers });
server.applyMiddleware({
  app: express(),
  path: '/graphql'
});

现在启动服务后，在浏览器中打开 http://localhost:{你的端口号}/graphql，就可以看到下面的界面

执行 query 请求查询 books

执行 mutation 请求添加 book

总结

通过这个简单的示例，我们能看到 GraphQL 为我们提供了图表化的 Query 来让前端实现按需获取数据，理论上只要你的业务模型没有发生变化, 从数据模型不会发生变化, 那么我们就不需要修改后端API。

当然这只是一个简单的示例，GraphQL 的应用和能解决的问题远不止于此，要想真正应用于实际项目，还需要更多的学习。