Question

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

一切正常，阅读和写作。

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

我试图在nuxt.config.ts中添加“ no-cache”标志和“仅网络”标志，但没有成功：

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',
  ],

  ...
};

Answer 2

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

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

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

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

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

nuxt.js + Apollo客户端：如何禁用缓存？

2 个答案: