这两天 CTO 向我安利了 GraphQL,说现在越来越多的项目在采用 GraphQL 模式开发,对客户端比较多样,需求变更比较快的产品很有帮助。
听人劝吃饱饭,所以我要赶紧学习一下。
什么是 GraphQL
GraphQL 不是一种实现方案,而是一个规范,是 facebook 倡导的一个规范,GraphQL 对 API 中的数据提供了一套易于理解的完整描述,使客户端能够准确地获得它需要的数据,而且没有任何冗余,也让 API 更容易地随着时间推移而演进,还能用于构建强大的开发者工具。
为什么要用 GraphQL
在接口开发的时候,我们经常会面临这些问题
1. 兼容多平台导致字段冗余
2. 一个页面需要多次调用 API 聚合数据
3. 需求经常改动导致接口很难为单一接口精简逻辑
以前为了解决这个问题,我们通常用下面的方式实现
现在 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,就可以看到下面的界面
总结
通过这个简单的示例,我们能看到 GraphQL 为我们提供了图表化的 Query 来让前端实现按需获取数据,理论上只要你的业务模型没有发生变化, 从数据模型不会发生变化, 那么我们就不需要修改后端API。
当然这只是一个简单的示例,GraphQL 的应用和能解决的问题远不止于此,要想真正应用于实际项目,还需要更多的学习。