logo标签列表

如何在apollo-link或apollo-client中禁用缓存？

react-apollo
96

我正在使用 apollo-client、apollo-link 和 react-apollo，想要完全禁用缓存，但不知道如何操作。

我阅读了 apollo-cache-inmemory 的源代码，它在构造函数中有一个 config 参数，但我无法建立一个虚拟的 storeFactory 来使其工作。

2
请查看 fetchPolicy 并将其设置为 network-only。 - Robin Wieruch
4个回答
195
您可以像这样为您的客户端设置defaultOptions：
const defaultOptions: DefaultOptions = {
      watchQuery: {
        fetchPolicy: 'no-cache',
        errorPolicy: 'ignore',
      },
      query: {
        fetchPolicy: 'no-cache',
        errorPolicy: 'all',
      },
    }

const client = new ApolloClient({
    link: concat(authMiddleware, httpLink),
    cache: new InMemoryCache(),
    defaultOptions: defaultOptions,

});

fetchPolicy 作为 no-cache，避免使用缓存。

请参阅 https://www.apollographql.com/docs/react/api/core/ApolloClient/#defaultoptions

1
阅读@duske的答案，它是正确的。我不知道为什么这个已婚是正确的，它不应该是。文档：https://www.apollographql.com/docs/react/advanced/caching.html#ignore - BrewMate
2
我认为在几乎所有的使用情况下，仅在某些查询上禁用缓存可能是更好的选择。@Anuj下面的回答可能是一个更好的解决方案。 - Elemental
2
不确定为什么这被标记为正确答案，因为它并没有起作用。DefaultOptions在Apollo中已经很长时间无法使用，而且仍未修复。 - paradox37
3
做得非常好。 谢谢。 - Saeed Afzal
1
非常适用于 Apollo 3。谢谢！ - Omar Dulaimi
显示剩余6条评论
56
17
页面未找到。 - Suleman
2
Apollo Client 在缓存中保存响应的时间有多长？ - Ajay S
39

我建议不要禁用Apollo客户端的内置缓存功能。相反，您可以针对每个查询始终设置fetchPolicy: 'network-only'，例如：





我建议不要禁用Apollo客户端的内置缓存功能。相反，您可以针对每个查询始终设置fetchPolicy: 'network-only'。

<Query
    query={GET_DOG_PHOTO}
    variables={{ breed }}
    fetchPolicy='network-only'
>
 {({ loading, error, data, refetch, networkStatus }) => {
   ...
 }}
</Query>

使用此查询获取数据时，它总是首先进行网络请求而不是从缓存中读取。

9
为什么不建议禁用Apollo客户端的缓存？请问有可能知道原因吗？ - Strider
4
我曾在某些边缘情况下使用“fetchPolicy：'network-only'”解决方案，但仍将数据存储在缓存中，并且在并发情况下未显示最新数据，这不符合用户的期望。具体情况取决于实际情况，但我的个人建议是，如果您想始终显示来自服务器的最新状态，则选择“no-cache”。它可以针对每个请求或整个客户端进行设置。 - domingo
1
有时重置Apollo缓存很有用：const client = useApolloClient(); someHandler =()=>{ client.resetStore(); } - northernwind
1
另一个使用缓存的场景是，我有一个 UI 进行了许多查询，其中缓存非常有用，但是有一个查询我需要定期运行以告诉我状态何时发生了变化——为该查询启用缓存导致我错过了这个变化。 - Andrew Allaire
1
另一个使用情况是我仍然希望使用缓存。我有一个用户界面，它执行许多查询，其中缓存非常有用，但是有一个查询我需要定期运行，以告诉我状态何时发生了变化 - 对于那个查询使用缓存导致我错过了变化。 - undefined
3

Irvin Chan的答案可以禁用Apollo的缓存行为，但通过性能分析我发现它实际上并没有完全禁用它。在幕后，它仍然向缓存添加内容，只是缓存未被使用而已。

这在我的情况下是一个问题，因为缓存行为本身会对我的应用程序产生明显的性能影响。（在大约20秒的重载数据期间需要处理约1秒的额外开销，即浪费了约5%的CPU时间）

为了解决这个问题，我创建了这个空的InMemoryCache备选项：

import {ApolloCache, NormalizedCacheObject} from "web-vcore/nm/@apollo/client.js";

const emptyCacheObj = {};
export class VoidCache extends ApolloCache<NormalizedCacheObject> {
    read(options) { return null; }
    write(options) { return undefined; }
    diff(options) { return {}; }
    watch(watch) { return ()=>{}; }
    async reset() {} // eslint-disable-line
    evict(options) { return false; }
    restore(data) { return this; }
    extract(optimistic) { return emptyCacheObj; }
    removeOptimistic(id) {}
    batch(options) { return undefined as any; }
    performTransaction(update, optimisticId) {}
    recordOptimisticTransaction(transaction, optimisticId) {}
    transformDocument(document) { return document; }
    transformForLink(document) { return document; }
    identify(object) { return undefined; }
    gc() { return [] as string[]; }
    modify(options) { return false; }
    readQuery(options, optimistic?) { return null; }
    readFragment(options, optimistic?) { return null; }
    writeQuery(opts) { return undefined; }
    writeFragment(opts) { return undefined; }
    updateQuery(options, update) { return null; }
    updateFragment(options, update) { return null; }
}

然后我将它连接到Apollo客户端，就像这样：

apolloClient = new ApolloClient({
    // replace InMemoryCache with VoidCache, because even a "not used" InMemoryCache can have noticeable overhead
    cache: new VoidCache(),
    // these config-changes might not be necessary, but I've kept them anyway
    defaultOptions: {
        watchQuery: {
            fetchPolicy: "no-cache",
            errorPolicy: "ignore",
        },
        query: {
            fetchPolicy: "no-cache",
            errorPolicy: "all",
        },
    },
});

目前看起来运行良好（避免了性能损失），但如果有问题需要调整，我会更新这个答案。

（注意：apollo-client的缓存结构随着时间的推移而发生了变化。我的答案仅显示了@apollo/client版本3.7.15的工作结构。如果您需要旧版本的结构，请查看答案历史记录：3.5.0-beta.4。）

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接