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%