nuxt.js + Apollo Client：如何禁用缓存？

Question

我设法得到了一个运行 typescript 和 apollo graphql 的 nuxt.js + nest.js。为了测试 graphql 是否有效，我使用了这个示例中的文件，并在 nuxt.js 页面中添加了一个按钮（on:click -> 通过 graphql 加载所有猫）。

一切正常，阅读和写作。

问题是在通过操场进行更改或使用其他 graphql 数据重新启动 nest.js 服务器后，nuxt.js 页面显示旧数据（单击时）。我必须在浏览器中重新加载整个页面，才能让 Apollo-Client 获取新数据。

我尝试向 nuxt.config.ts 添加“无缓存”标志和“仅网络”标志，但没有成功：

apollo: {
defaultOptions: {
  $query: {
    loadingKey: 'loading',
    fetchPolicy: 'no-cache'
  }
},
clientConfigs: {
  default: {
    httpEndpoint: 'http://localhost:4000/graphql',
    wsEndpoint: 'ws://localhost:4000/graphql'
  }
}
}

获取猫的函数：

private getCats() {
this.$apollo.query({ query: GET_CATS_QUERY }).then((res:any) => {
  alert(JSON.stringify(res.data, null, 0));
});
}

如何禁用缓存或是否有其他解决方案？

Answer 1

我最近遇到了类似的问题，并通过创建一个覆盖默认客户端选项的 Nuxt 插件设法解决了这个问题：

// plugins/apollo-overrides.ts
import { Plugin } from '@nuxt/types';

const apolloOverrides: Plugin = ({ app }) => {
  // disable caching on all the queries
  app.apolloProvider.defaultClient.defaultOptions = {
    query: {
      fetchPolicy: 'no-cache',
    },
  };
};

export default apolloOverrides;

不要忘记在 Nuxt 的配置中注册它：

// nuxt.config.js
export default {
  ...

  plugins: [
    '~/plugins/apollo-overrides',
  ],

  ...
};