经过试用,Apollo接入到Vue通过vue-apollo这个库实现,具体接入方式有三种:
- 单独文件创建ApolloClient实例,在main.js引入,同时在api文件中引入实例
通过.graphql写查询语句
1
2
3query HelloWorld {
hello
}配置webpack读取.graphql文件
1
2
3
4
5
6
7
8
9
10
11
12// vue.config.js
module.exports = {
chainWebpack: config => {
// GraphQL Loader
config.module
.rule('graphql')
.test(/\.graphql$/)
.use('graphql-tag/loader')
.loader('graphql-tag/loader')
.end()
}
}使用ApolloClient实例的query方法新建查询,会返回一个Promise对象
1
2
3
4
5// login.js
import ApolloClient from './ApolloClient'
import * as loginGql from './login.graphql'
export const getHello = (params) => ApolloClient.query({query: loginGql.HelloWorld})通过包装传入参数实现类axios效果
1
2
3import { getHello } from 'login.js'
getHello().then().catch()
优点: 可以实现类似axios的封装,在vue组件和js代码中使用方法同axios,从axios迁移成本较低
缺点: 通过ApolloClient实现查询,在vue组件中无法通过$apollo
获取到查询相关信息,也就没法利用apollo的loading等特性
Vue组件
新增数据后重新请求已更新本地缓存
使用refetchQueries
属性实现1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16this.$apollo.mutate({
// 查询语句
mutation: gql`mutation ($name: String!, $phone: String!) {
createCustomer(name: $name, phone: $phone) {
id
name
phone
}
}`,
// 参数
variables: {
name: "test",
phone: `189${Math.round(Math.random() * 100000000)}`
},
refetchQueries: [{ query: loginGql.getCustomers }]
});
修改数据后自动更新缓存
要求后台更新后返回新的数据对象,只要id/__typename
能匹配上,就会自动更新,不然就只有在update
字段中使用readQuery和writeQuery
手动更新缓存1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21this.$apollo.mutate({
// 查询语句
mutation: gql`mutation ($label: String!) {
addTag(label: $label) {
id
label
}
}`,
// 参数
variables: {
label: newTag,
},
update: (store, { data: { addTag } }) => {
// 从缓存中读取这个查询的数据
const data = store.readQuery({ query: TAGS_QUERY })
// 将变更中的标签添加到最后
data.tags.push(addTag)
// 将数据写回缓存
store.writeQuery({ query: TAGS_QUERY, data })
}
}