GraphQL + Apollo + Vue 牛刀小试

前言

GraphQL 这门新技术在去年就开始火热起来,今年也在很多技术周刊、论坛上看到关于这门新技术的研究和讨论。因此作为一名前端开发,紧跟技术潮流是必须的 🤣,周末便花了点时间对 GraphQL 进行了相关学习,学习过程中写了一些简单的 demo,在此过程中发现这玩意是真的香啊,所以决定要开篇博客来记录下这个过程。

什么是 GraphQL ?

当学习一本新技术时,首先就要去了解这门新技术的定位和一些相关概念,然后就要去研究它的诞生能够解决哪些痛点和带来哪些爽点。我个人习惯是直接去官方文档找到这些疑问的答案。打开官网,你就看到了下面有很醒目的一句话:

一种用于 API 的查询语言

还附加了几句很有意思的话:

  • 请求你所要的数据,不多不少
  • 获取多个资源,只用一个请求
  • 描述所有的可能的类型系统
  • 支持多种语言 (js、java、go)

说实话我看到这些第一反应就是感觉很酷,但也给我带来了很多疑惑,单从纸面上看还是比较难理解的,没有实际操作的话就很难体会上面说的那些特征。所以我开始了一波学习和 demo 的尝试 🤔

GraphQL 一些关键概念包含 TypeSchemaQuery, Mutation等,下面会分别做一下简单的说明,具体还是要结合实际代码进行分析。

查询 (Query)

顺着文档看,首先就看到到了关于查询的相关使用,所谓的查询就是向服务端获取你要想的数据,比如我要查所有的用户列表,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 先定义 User 数据结构
type User {
id: Int!
name: String!
age: Int!
}
// query 查询
query {
// 返回一个User类型的集合
userList() : [User!]
// 可以传参查询
// 根据id查询用户信息
orderUser(id: Int!) : User
}

REST 风格接口应该是这样子的

1
2
GET /api/v1/userList
GET /api/V1/userList/:id/

这时候,你会对GraphQL的解析—查询语言会有点小小的感触了

还有,querytype的使用息息相关,所以在使用query的时候,一定要先去了解type类型系统,关于type类型系统在官网的文档 上已经写得非常详细,这里我就不具体说了

变更 (Mutation)

GraphQL 中的 Mutation 是用来改变服务器上的数据的。对应着 REST 风格中的 PUT,DELETE,POSTMutation的语法风格和Query很类似。关键在解析Mutation过程中会有所不同。还有值得注意的是,查询字段时,是并行执行,而变更字段时,是线性执行,一个接着一个。

比如说,我要变更一个用户user的名字

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
mutation {
// 通过参数 id 去查到对应的用户信息
MutationUserName(id: Int!, name: String!) : User!
}
// 解析 MutationUserName DEMO
Mutation: {
MutationUserName(_, { id, name }) {
const user = userList.find(val => val.id === id);
if (!user) {
throw new Error(`找不到id为 ${id} 的user`);
}
user.name = name
return user;
}
}

Schema

在 GraphQL 中,Schema 主要是用来描述数据的形态,哪些数据能被查询到,所以在 Schema 中主要定义可用数据的数据类型。这么说吧,你想要查到的数据都必须要在 Schema 中进行定义,所以这里是需要写很多 type 的,这里还需要统一定义 QueryMutation,也就是要把上面那些定位全部放到这里来

🌰:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
type User {
id: Int!
name: String!
age: Int!
}
type Query {
userList() : [User]
orderUser(id: Int!) : User
}
mutation {
MutationUserName(id: Int!, name: String!) : User
}

很很基础的内容大概就是酱紫,下面应该要开始来一波实战操作了

Apollo-GraphQL

Apollo-GraphQL 是基于 GraphQL 封装的一种实现,它可以在服务上进行分层,包括 REST api 和 数据库,它包含客户端和服务端,还有 GUI 开发工具,让开发人员可以快速上手进行开发。

架构图

我在 google 关于 GraphQL 的时候,就发现了这个平台,在官方文档上看到了一些讲解和入门练习。发现其入口门槛其实并不高,安装几个依赖便可快速启动服务端,客户端也支持了 vuereact/rnng等热门的前端框架。我这里的 demo 也是根据文档教学一步步做出来的,下面就来讲讲我的 demo 实现过程和一些思路。

开始实战

具体想法

  • 以搭建博客网站为例,有博客列表、分类、博客信息 (query)
  • 点击某个博客,跳转到具体文章内容,返回时有已读标注 (mutation)
  • 服务端使用 apollo-server-express
  • 客户端使用 vue-apollo
  • 数据为 mock 的静态 json

搭建服务端

这边采用 apollo-server-express 快速搭建服务端

首先安装依赖

1
yarn add apollo-server-express express graphql

好,这个 demo 只需要上面三个工具

对于apollo-server,比较基本的就是要搞清楚 schemaresolvers 应该如何定义,这些理解起来还是比较容易,但如果想玩得很溜,肯定需要投入大量的时间去研究。

其实就是

1
2
3
4
const server = new ApolloServer({
typeDefs,
resolvers
});

定义好 typeDefs(schema) 和 resolvers,便可快速启动

首先,把 mock 的数据源定好

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
[
{
"id": 1,
"title": "记一次系统前端底层升级总结",
"date": "2018-11-11",
"introduction": "最近参与了一个比较大的类后台管理系统的前端开发(vue技术栈),并负责了该系统的底层升级,升级过程期间,遇到了不少问题,在解决问题的过程中学到了很多,趁着今天双11没啥事做,那么就花点时间总结下升级系统的过程吧",
"category": "vue",
"isRead": false
},
{
"id": 2,
"title": "Vue实践小结(长期更新)",
"date": "2018-11-04",
"introduction": "近期都在用 Vue 全家桶进行项目开发,过程中难免会遇到不少问题,这篇博客主要就是记录开发过程中遇到的问题,和每个问题对应的解决方案。此外,Vue 框架和周边生态会一直更新,以及发布新功能,在实践过程中总会遇到一些所谓的“坑”,我也会把填坑过程记录于此。坑是填不完的,这篇博客也是写不完的。",
"category": "vue",
"isRead": false
},
{
"id": 3,
"title": "如何用Koa2返回文本和图片流以及解决乱码事件",
"date": "2018-04-05",
"introduction": "前两天做项目的时候,碰到了一个要在客户端(浏览器)中实现预览 txt 文档和图片的小需求,在开发过程中遇到了一些有趣的小插曲---客户端读取 txt 时出现各种奇怪乱码,图片就没问题。一时半会还没找到好的解决方法,因为那天又刚好周五,所以在周末的时候,我决定宅在家里好好研究如何解决这个有趣的现象。",
"category": "koa2",
"isRead": false
}
][
({
"id": 1,
"html": "<h1>记一次系统前端底层升级总结</h1>"
},
{
"id": 2,
"html": "<h1>Vue实践小结(长期更新)</h1>"
},
{
"id": 3,
"html": "<h1>如何用Koa2返回文本和图片流以及解决乱码事件</h1>"
})
]

然后,要开始思考如何定义 Schema 中的 type

我这边一共定义了以下这些 type

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
type Article {
id: Int!
title: String!
date: String!
introduction: String!
category: String
isRead: Boolean!
}
type ArticleContent {
id: Int!
html: String!
}
type Category {
num: Int!,
name: String!
}
type Query {
fetchArticles: [Article]
getAllCategories: [Category]
getArticleContent(id: Int!): ArticleContent
}
type Mutation {
articleIsRead(id: Int!): Article
}

把 这些 schema 转换为 typeDefs, 需要用到

1
2
3
const { gql } = require("apollo-server-express");
module.exports = gql`上面定义的type`;

定义 resolvers

resolvers 其实是 querymutation 的实现过程。也就是说这里会进行数据库的查询或者是 api 的调用等等,最终放回的结果在这里出来。

我这边的实现大概是这样的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
const articles = require("../data/articles.json");
const articleContent = require("../data/articleContent.json");
const resolvers = {
Query: {
fetchArticles() {
return articles;
},
getAllCategories() {
return articles.reduce((pre, cur) => {
const cate = pre.find(_ => _.name === cur.category);
if (cate) {
cate.num++;
} else {
const obj = {
name: cur.category,
num: 1
};
pre.push(obj);
}
return pre;
}, []);
},
getArticleContent(_, { id }) {
return articleContent.find(val => val.id === id);
}
},
Mutation: {
// 标记已读
articleIsRead(_, { id }) {
const article = articles.find(val => val.id === id);
if (!article) {
throw new Error(`找不到id为 ${id} 的文章`);
}
if (article.isRead) {
return article;
}
article.isRead = true;
return article;
}
}
};
module.exports = resolvers;

好了,typeDefs 和 resolvers 搞定了,写点服务器启动脚本

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
const express = require("express");
const { ApolloServer } = require("apollo-server-express");
const typeDefs = require("./schema");
const resolvers = require("./resolvers");
const PORT = 4000;
const app = express();
const server = new ApolloServer({
typeDefs,
resolvers,
playground: {
endpoint: `/graphql`,
settings: {
"editor.theme": "light"
}
}
});
server.applyMiddleware({ app });
app.listen(PORT, () =>
console.log(
`🚀 Server ready at http://localhost:${PORT}${server.graphqlPath}`
)
);

然后 node server.js 一下看看

启动不报错的话,在浏览器http://localhost:4000/graphql可以看到图形化页面

gql-ui

试试 query 查询

gql-query

服务端搭建完成 🎉

客户端搭建

最近在用 vue 比较多,所以就直接用 vue create xxx 进行一顿操作来弄了,主要也是基于 vue-apollo 文档 进行学习和编写

安装?

yarn add vue-apollo graphql apollo-boost

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import Vue from "vue";
import ApolloClient from "apollo-boost";
import VueApollo from "vue-apollo";
Vue.use(VueApollo);
const apolloClient = new ApolloClient({
// 你需要在这里使用绝对路径
uri: "http://localhost:4000/graphql"
});
const apolloProvider = new VueApollo({
defaultClient: apolloClient
});
new Vue({
el: "#app",
apolloProvider,
render: h => h(App)
});

配置支持 .gql || .graphql 文件后缀的 webpack loader

vue.config.js

1
2
3
4
5
6
7
8
9
10
11
module.exports = {
// 支持 gql 文件
chainWebpack: config => {
config.module
.rule("graphql")
.test(/\.(graphql|gql)$/)
.use("graphql-tag/loader")
.loader("graphql-tag/loader")
.end();
}
};

这样就可以导入xxx.gql文件了,不一定非要在.vue文件或者.js文件里面写查询语句了

就是这么简单 😁

so,使用?

接下来就试一下查询多个数据,比如说一起查询博客文章列表和分类信息。验证一下是不是官方说的获取多个资源,只用一个请求那么神奇

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
import gql from "graphql-tag";
const fetchDataGql = gql`
{
fetchArticles {
id
title
date
introduction
category
isRead
}
getAllCategories {
num
name
}
}
`;
export default {
data() {
return {
articles: [],
categories: []
};
},
apollo: {
fetchData() {
const vm = this;
return {
query: fetchDataGql,
update(data) {
vm.articles = data.fetchArticles;
vm.categories = data.getAllCategories;
}
};
}
}
};

打开浏览器控制台看看

vue-gql-query

确实是只有一次请求就能获取到一个页面上所有的资源!最近在做项目的时候,遇到一个页面要请求 5 个REST接口,有些接口经常返回了很多页面上用不到的,简单来说就是多余的数据,这样不仅浪费了服务器资源,前后端对接起来也不方便,所以 GraphQL 可以很好地解决这个痛点,真是香啊!

ui 界面上随便写点

vue-apollo-article

好了,查询搞定了,下面试试 变更mutation

需求是点击某篇文章,让这篇文章的 title 有个已读标识(opacity: 0.4)

服务端那边已经定义好,客户端代码核心实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
const mArticleISRead = gql`
mutation articleIsRead($id: Int!) {
articleIsRead(id: $id) {
id
title
date
introduction
category
isRead
}
}
`
methods: {
mutationIsRead(id) {
this.$apollo.mutate({
mutation: mArticleISRead,
variables: {
id
},
update: (store, { data: { articleIsRead } }) => {
console.log(articleIsRead);
}
});
}
},

模板层增加一些判断

1
2
3
4
5
6
7
<router-link
:class="{isRead: item.isRead}"
@click.native="mutationIsRead(item.id)"
:to="{ name: 'content', params: { id: item.id } }"
>
{{ item.title }}
</router-link>

测试

vue-apollo-mutation

done!

写到这里,让我感觉好奇的是,我重新跳转回 article 页面,并没有重新触发 ajax 请求,后来看了文档才发现这是由于 Apollo-GraphQL 自带了运行时的 cache,变更数据的某个字段是不需要重新去获取最新的列表的,Apollo 会智能去识别然后自动触发视图的 render。这样的话,我在想,这样既然了 Apollo 的缓存机制,是不是就不需要像 vuex、redux、mobX 这些状态管理工具了呢?毕竟都是运行时的数据,如果 Apollo 的 cache 机制能解决状态管理层面上的问题,那么会减少很多项目层级的复杂度吧。凭空想是想不出的,只有在实际项目中才能找到真正的答案。

好了,GraphQL 的服务端和客户端均已搭建,一些自身的想法也得到了相关印证,不断探索、不断验证想法正是学习的一种乐趣 😁

上面代码均已上传到 github

总结

GraphQL 牛刀小试结束。关于 GraphQL 以后能不能取代 RESTapi 还是一个很富有争议的话题。REST 已经发展多年,它解决了以前的不少问题但也留下了不少问题,GraphQL 还是比较新的,相信还有很多人都不知道有这个技术,即使它已诞生了好多年…还是那句话,每个新的技术的诞生,必然是为了解决某些问题,以及提高生产效率,这样才有它们存在的价值和意义。

文章作者: Rao Jinwei
文章链接: http://shooterblog.site/2019/05/25/GraphQL + Apollo + Vue 牛刀小试/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 3.0 许可协议。转载请注明来自 Rao Jinwei's Blog