简介
GraphQL
是基于「类型系统」来执行查询的查询语言。
Facebook 2012 年开始使用 GraphQL
,15年开源。
graph
定义了一套标准,用于描述服务端和客户端的通信。可以使用任意语言来实现graph所描述的功能。就和ECMAScript
标准之于JavaScript
一样。
样例
前端传入字段和结构。后台按照前端的需求返回数据。
一个GraphQL
请求由两部分组成。 操作符 和 文档。
操作符
GraphQL
作为前后台交互的中间层,不能只有查询功能,在REST
中,有GET
、POST
、DELETE
等类型的请求。
GraphQL
则将前后台通信直接分为两大类 query
和mutation
。
query
顾名思义,query
是默认的操作符,代表查询,是不会给服务端带来副作用的请求。没有操作符的话会默认是query操作符
,上面的动图就是省略了query
操作符。 完整的请求其实是这样的。
query {
hero {
name
}
}
mutation
mutation
代表一个动作,会给服务器带来修改。比如增删改。例如:
mutation addMessage($input: MessageType!) {
addMessage(input: $input) {
id
text
}
}
返回结果
{
"addMessage": {
"label": "测试的一个message",
"id": "0RaqSeOL0"
}
}
对($input: MessageType!)
可能会一头雾水,这写只是定义传参的一些语法,过过文档就可以学会。
subscription
subscription
, 订阅操作符还未纳入标准,但是已经被实现应用了。订阅操作符的功能是像服务端监听一个操作。就像VUE
里面的watch
一样。只是我们watch
的是服务端。一旦服务端发生了我们订阅的改变,服务端就会主动把变化推送给我们。自己的业务代码里面再也不要维护什么轮询,定时器啦。
文档
文档部分:
{
hero {
name
height
}
}
文档就是前端向后台描述所需的字段。也是前端觉得最爽的地方,数据结构清晰明了。发送什么样的请求,拿到什么样的数据。
观察文档,文档是由 类型 和 字段 构成的。GraphQL
是强类型语言。如果使用过typescript
就很好理解。
可以认为,我们规定了一种对象,它们一定有定义的属性。
hero
就是一个类型。name
和 height
就是字段。
特点
- 获取多类资源,只用一个请求。
- 前端控制:是客户端指定的查询,端从被动为主动,想要什么拿什么。
- 层次结构化: 操作粒度为字段级别,可读性好,查询的结构和结果非常相似。
- 开发友好:得益于强类型,
GraphQL
可以在编写代码时就检查语句是否错误,也能智能提示类型下的字段。可以自动生成文档,提供丰富的体验。 - 降低前后端沟通成本。
和REST
对比
- 随着系统发展,
REST
的接口持续平面增长,GraphQL
只需增加类型,更加利于维护。 - 如果是复杂的客户端,一个页面往往需要调用多个接口,
GraphQL
只需调用一次即可,一次请求到所有数据。 -
REST
所操作的资源相对是离散的(接口接口接口),GraphQL
的数据更有整体性(因为是类型构成)。
社区框架
目前前端客户端主要有Apollo
和Relay
,他们的作用就和axios
一样,方便我们构造请求。因为业务中主要用到vue
,有vue-apollo所以我选择的是Apollo
。
vue-apollo
自带了store
层,方便进行数据缓存,vuex
也可以去掉了。
资料
我用vue-cli
生成了一个简单的增删改查的项目。 可以对照着文档自己敲代码。 GraphQL_demo
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。