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

Question

我正在使用apollo-client,apollo-link和react-apollo,我想完全禁用缓存,但不知道该怎么做.

我读了apollo-cache-inmemory它的源代码,它config的构造函数中有一个参数,但是我无法构建一个虚拟函数storeFactory来使它工作.

Answer 1

你可以defaultOptions像这样设置你的客户:

const 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为network-only避免使用缓存.

Answer 2

实际上,设置fetchPolicy为network-only "仍然保存对缓存的响应以供以后使用,绕过读取并强制网络请求".

如果你真的要禁用缓存,读取和写入,使用no-cache.

看看官方文档:https://www.apollographql.com/docs/react/advanced/caching.html#ignore

Answer 3

I would always suggest not to disable inbuild caching feature from apollo client. Instead you can always set fetchPolicy: 'network-only' for an individual queries. Something like this

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

While fetching data with this Query, it would always do a network request instead of reading from cache first.

Answer 4

虽然Irvin Chan 的答案确实设法禁用了 Apollo 的缓存行为，但我通过分析发现它实际上并没有完全禁用它；在幕后，它仍在向缓存添加内容，只是缓存没有被使用。

这对我来说是一个问题，因为缓存行为本身对我的应用程序造成了明显的性能影响。（约 1 秒的处理开销，在约 20 秒的繁重数据加载期间，即浪费了约 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。）