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

Posted 2023-03-08

【中文标题】nuxt.js + Apollo Client：如何禁用缓存？

【英文标题】：nuxt.js + Apollo Client: How to disable cache?

【发布时间】：2019-12-16 08:10:10

【问题描述】：

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

一切正常，阅读和写作。

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

我尝试将“no-cache”标志和“network-only”标志添加到 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));
);

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

【参考方案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',
  ],

  ...
;

【参考方案2】：

我遇到了这样的问题，您可以在查询前删除 $ 轻松解决它

defaultOptions: 
  query: 
    fetchPolicy: 'no-cache',
    errorPolicy: 'all'
  
,

然后重新打开你的开发服务器

如果此解决方案不起作用，请为每个查询添加获取策略

.query(
      query: sample,
      variables: ,
      errorPolicy: "all",
      fetchPolicy: "no-cache"
    )