在Vue中使用GraphQL

本文帮助你在 Vue 中使用 GraphQL,也许你尝试使用过axios,不得不说 axios 并不适合用来发送 GraphQL API 请求,本文介绍一种更简单的方式并且带你上手。如果你对 GraphQL 后端感兴趣可以阅读我的上一篇文章《Apollo-GraphQL快速上手-服务端》。

官方维护的 Apollo Client 是 React 编写的,我使用的是 Vue,虽然说是由社区维护,但 API 基本是按照 React 版本的来写的,用起来障碍也不大。

安装

社区维护的 Vue 版本的 Apollo Client 叫vue-apollo,安装也相当简单,首先使用 Vue Cli 创建一个项目,然后在项目文件夹运行命令:vue add apollo

由于有中文文档,我就取其精要,带大家简单上手,更高级的操作,大家可以去网站上看一看。本文的逻辑和文档大不相同,如果你理解本文的思路,你将可以更灵活的操作 GraphQL 请求

apollo 对象

apollo对象是 apollo-vue 的核心,无论是查询还是变更,只要向可接受apollo对象的地方传入它就可以完成 GraphQL 的查询与变更。常用的属性和方法有四个:queryvariablesmutationupdate(),看起来应该是这样的:

template.vue
1
2
3
4
5
6
7
8
9
10
11
12
apolloObj: {
query: gql`
query{}
`,
mutation: gql`
mutation{}
`,
variables: {
var1: this.data.name
},
update(){}
}
  • query:GraphQL 查询代码
  • mutation:GraphQL 变更代码
  • variables:GraphQL 代码中不能使用 js 的变量,variables相当于转换器,将 js 代码转换为 GraphQL 代码并使用,在 GraphQL 中,使用$标识符引用变量。
  • update():一个回调函数,当 GraphQL 请求有了返回值之后的下一步操作

请求发送时机

前面说了只要向可接受apollo对象的地方传入它就可以完成 GraphQL 的查询与变更,所以我们讨论以下两种请求发送的时机。

组件实例化时

这个方案是将apollo对象传入组件中名为apollo的对象中,然后在组件实例化的过程中自动完成 GraphQL 请求,这种方案常用于 query,而且示例也是这样做的,其实你也可以进行 mutation,下面这个例子中有两个apollo对象:booksdelBooks,分别进行了 query 和 mutation:

template.vue
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
import gql from "graphql-tag";

export default {
data: function () {
return {
books: [],
};
},
apollo: {
books: gql`
query {
books {
title
author
}
}
`,
delBooks: {
mutation: gql`
mutation {
id: 1
}
`,
update(res) {
console.log(res);
},
},
},
};

apollo对象中创建一个与data对象属性同名的属性,apollo会自动将获得的数据挂载到data对象。如上面这段代码apollo对象中的books属性,只需要在data中注册就能自动拿到请求的结果。

如果你的apollo对象中只有query或者只需要mutation,就可以像上面books对象中那样写,只需要将 gql 构造出的代码作为属性的值就行了。

TIPS:除了在 js 使用 gql 构造 GraphQL 查询代码,也可以将 GraphQL 查询代码写入.gql文件,在 js 中引用。

手动发送请求

你可以使用this.$apollo.mutate()方法来发送 GraphQL 请求,它不会自动调用,所以更加灵活,你可以将它放在方法甚至是生命周期中,完全由你控制,它接受 apollo 对象作为参数,使用起来大概是这样的:

template.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import gql from "graphql-tag";

export default {
methods: {
check() {
this.$apollo.mutate({
query: gql`
query {
books {
title
}
}
`,
});
},
},
};

以上就是我对 vue-apollo 的使用小结,使用和文档完全不同的思路完全是我的个人理解,如果有不同的见解希望大家留言评论。

评论

Your browser is out-of-date!

Update your browser to view this website correctly.&npsb;Update my browser now

×