Apollo接入Vue记录

经过试用,Apollo接入到Vue通过vue-apollo这个库实现,具体接入方式有三种:

  • JS API
  • Vue组件
  • Apollo组件

    JS API

    实现方法:
  1. 单独文件创建ApolloClient实例,在main.js引入,同时在api文件中引入实例
  2. 通过.graphql写查询语句

    1
    2
    3
    query HelloWorld {
    hello
    }
  3. 配置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()
    }
    }
  4. 使用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})
  5. 通过包装传入参数实现类axios效果

    1
    2
    3
    import { 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
16
this.$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
21
this.$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 })
}
}

0%