vue-apollo手动执行查询时如何全局配置no-cache禁用缓存

你当前写在VueApollo构造参数里的defaultOptions.$query是vue-apollo层仅针对组件apollo属性声明的智能查询的配置，手动调用this.$apollo.query是直接调用底层Apollo Client的实例方法，不受该配置影响，要实现全局生效需要修改Apollo Client实例的默认配置。

操作步骤 #

1. 找到项目中apolloClient实例的初始化代码，通常和vue-apollo.js在同一目录下，默认生成的文件名为apollo-client.js，也有可能直接写在vue-apollo.js文件内。
2. 在创建ApolloClient实例时，新增defaultOptions配置项，给查询设置全局默认的fetchPolicy，示例如下：

import { ApolloClient, createHttpLink, InMemoryCache } from '@apollo/client/core'

// 原有配置保留不动
const httpLink = createHttpLink({
  uri: process.env.VUE_APP_GRAPHQL_HTTP,
})
const cache = new InMemoryCache()

const apolloClient = new ApolloClient({
  link: httpLink,
  cache,
  // 新增以下全局默认配置
  defaultOptions: {
    // 普通查询的全局默认配置
    query: {
      fetchPolicy: 'no-cache',
    },
    // 如果需要同时禁用watchQuery（订阅式查询）的缓存，可新增以下配置
    watchQuery: {
      fetchPolicy: 'no-cache',
    }
  }
})

修改完成后所有查询（包括组件智能查询、手动调用$apollo.query）都会默认使用no-cache策略，无需每次调用时单独传参，有特殊需求的场景依然可以在调用时主动传入fetchPolicy参数覆盖全局配置。

内容的提问来源于stack exchange，提问作者Victor