最近项目用到了graphql，学习了一些并在公司做了一个小分享，希望对你有帮助
一、介绍
Graphql给前端提供一种强力的查询工具，我们可以根据自己定义(需要)的格式去拿数据，它有自己的一套类型(schema)系统，schema 是 type、interface、enum 和 union 的集合，用来构建你的 API 数据模型; 类型系统在客户端和服务端之间提供了强类型的条约；我们想要什么，它就会准确给你返回什么，无冗余；
二、对比API
优缺点对比
- API接口数量众多维护成本高：接口的数量多、颗粒度较粗;graphql单个查询即可返回需要的信息，服务端只需要对客户端暴露一个地址即可
//如，要查A的表哥的公司的老总的父亲的车子是什么，可能需要多个api组合进行查询，而graphql一步到位；
query {
user (name : “A”) {
cousin{
boss{
father{
car
}
}
}
}
}
// 一般REST API需要多个接口查询，面对当前业务，新增接口也是开发成本
-
接口扩展成本高, 需求更换时，涉及到多接口合并，前端会增加请求数，还需要做数据处理等；
-
传统API接口：后端更新接口字段，文档未及时更新，可能影响到前端；graphql直接面向数据，通过 GraphiQL或者hasura 等可视化调试引擎展现服务端能提供的所有数据，开发过程不再依赖接口文档；
-
基于目前大多数企业架构，GraphQL应用需要前后端统一改造，适用方案较少，风险和成本较高；推动难度较大；比较适用全栈项目；GraphQL数据库查询性能存在瓶颈，服务端那边是需要平衡接口复杂度与数据库查询语言之间的复杂度；
三、主要概念
- 定义 API Schema
Schema定义了字段的类型、数据的结构，描述了接口数据请求的规则，当我们进行一些错误的查询的时候 GraphQL 引擎会负责告诉我们哪里有问题，和详细的错误信息；
自定义类型的定义主要是在服务端完成
# src/schema.graphql
# 接口定义
interface UserInterface {
id: ID!
name: String!
age: Int
gender: Gender
}
interface BobbyInterface{
hobby: String!
}
# 枚举定义 一般声明一组取值是常量的列表，字段属性需要大写
enum Gender {
MAN
WOMAN
}
# 对象User的定义，type类似js的对象
type UserInfo implements UserInterface { // 继承
id: ID!
name: String!
age: Int!
gender: Gender
}
type UserHobby implements BobbyInterface {
id: ID!
name: String!
age: Int!
gender: Gender
hobby: String!
}
# 定义联合类型，进行字段的拓展
union User = UserInfo | UserHobby
# 定义Query入口
type Query { // 基本查询
user(id: String!): [User]
// 标量类型：GraphQL 中内置有一些标量类型 String、Int、Float、Boolean、ID（ID类型代表着一个独一无二的标识、类似主键），用户也可以定义自己的标量类型
// !符号表示该字段不可空
// []: List类型、表示某个字段返回不止一个标量类型的数据
}
# 实现query查询
query{
user(name: "范德彪") {
id
name
age
gender
}
}
# Graphql Mutation, Subscription 等特殊的根类型，用于定义 API Schema Mutation定义，实现RUD
type Mutation {
createUser(id: ID!, name: String!, email: String!, age: Int,gender: Gender): User!
updateUser(id: ID!, name: String, email: String, age: Int, gender: Gender): User!
deleteUser(id: ID!): User
}
- 解析函数 Resolver: 负责到数据库中取得数据并返回
Query {
articles {
id
author {
name
}
comments {
id
desc
author
}
}
}
-
第一层解析，使用articles的Resolver获取解析数据，
-
第二层解析
(1) id在Author类型中为标量类型，解析结束
(2) author在Author类型中为对象类型User，尝试使用User的Resolver获取数据，当前field解析完毕
(3) 之后对第二层解析的返回值，进行第三层解析，当前author还包含一个Query, name，直到它是标量类型，解析结束
- Subscription
用于监听数据变动、并靠 Websocket 等协议推送变动的消息给订阅方。
subscription {
userChanged { // 监听用户数据变动
name
id
}
}
四、应用
- React + Graphql
Apollo 是基于 GraphQL 的全栈解决方案集合；包括了 apollo-client 和 apollo-server 。
客户端：
- 创建react+apollo
// 快速创建react demo
$ npx create-react-app apollo-react-demo
$ cd apollo-react-demo
$ npm install apollo-boost @apollo/react-hooks graphql
$ npm start
- CURD
// 查询数据
{
delivery_config(where: {id: {_eq: "lmXVOrQ8RMKezj89yP9aqw3xpo1JNL"}}) {
id
type
delivery_config_extras {
id
value
key
}
}
}
// 更新数据
mutation {
update_delivery_config(where: {id: {_eq: "lmXVOrQ8RMKezj89yP9aqw3xpo1JNL"}}, _set: {foreign_type: 2}) {
affected_rows
}
}
// 插入数据
mutation {
insert_delivery_config(objects: {brand_id: "100011", foreign_type: 1, delivery_config_extras: {data: {key: "testkey", value: "test", id: 123453323, created: "1574927283661", modified: "1574927283663"}}, id: "111233", created: "1574927283666", modified: "1574927283633", type: 2}) {
returning {
brand_id
}
}
}
// 删除数据
// 先删除关联数据
mutation {
delete_delivery_config_extra(where: {id: {_eq: 123453323}}) {
affected_rows
}
}
mutation {
delete_delivery_config(where: {id: {_eq: "111233"}}) {
affected_rows
}
}
使用fetch请求graphql操作
五、总结
-
Graphql主要是用来解决 API 设计问题的，至于怎么优化查询并不是它的重点，我们正在进行的配送服务，它有一套传统接口，也提供graphql文档、搜索引擎等，这样可以更大程度上去释放系统的可扩展性，可满足更多前端开发的需求；目前企业很多上线运行的稳定的项目，如果考虑引入graphql，其实也会有很高的人力和学习、开发成本，推行可能会有阻碍；
-
其实真正使用什么样的工具，还是要根据自己项目的特点去选择合适的技术，不是看什么新就用什么。GraphQL 也有缺点，如一次性查询过多数据，提升了被 服务器被DDOS 的风险等，但是如果你的需求可以正好避开这些缺点，
或者用限流、持久化查询等方案解决问题，就可以尝试使用。
参考链接：