如何控制Apollo查询缓存及apollo-cache-persist实现缓存与更新检查

嘿，我来帮你搞定这两个需求～

一、持久化所有带@client标记的查询数据 #

apollo-cache-persist其实完全可以处理带@client的缓存数据，可能是你之前的配置没到位，我给你捋捋正确的姿势：

• 首先，它默认会持久化缓存里的所有内容，包括@client字段和查询，只要你把InMemoryCache和持久化存储（比如localStorage）正确绑定。典型配置大概是这样：

import { ApolloClient, InMemoryCache } from '@apollo/client';
import { persistCache } from 'apollo-cache-persist';

const cache = new InMemoryCache();

// 初始化持久化缓存
persistCache({
  cache,
  storage: window.localStorage, // 也可以用sessionStorage或者其他存储方式
}).then(() => {
  // 这里初始化ApolloClient
  const client = new ApolloClient({
    cache,
    uri: '/your-graphql-endpoint',
  });
});

• 要是发现某些@client数据没被持久化，大概率是这些数据没被正确写入缓存。比如通过客户端resolver返回的@client字段、用writeQuery/writeFragment手动写入的数据，都会被缓存并持久化。如果是临时状态没存入缓存，就得检查你的客户端逻辑是否正确把数据放进了Apollo缓存里。

• 要是你觉得apollo-cache-persist不符合预期，替代方案可以手动用localStorage配合Apollo缓存API：组件初始化时用readQuery读缓存，没有的话从localStorage加载并写入缓存；缓存更新时（比如writeQuery之后），把对应数据同步到localStorage。不过这种方式要自己处理更多细节，还是优先推荐apollo-cache-persist。

二、先返回本地缓存，再请求服务器更新 #

你说的这个功能确实能轻松实现，但不是默认开启的——Apollo默认的fetchPolicy是cache-first（优先用缓存，没有才请求服务器），而你需要的是cache-and-network：

• 在单个useQuery里配置：

import { useQuery } from '@apollo/client';
import YOUR_QUERY from './your-query.graphql';

const { data, loading } = useQuery(YOUR_QUERY, {
  fetchPolicy: 'cache-and-network',
});

这个配置下，组件会先拿到缓存里的现有数据（如果有的话），然后立刻发起网络请求，请求完成后如果服务器返回新数据，会自动更新缓存和组件的data。

• 如果想全局开启这个策略，避免每个查询都手动配置，可以在创建ApolloClient时设置默认选项：

const client = new ApolloClient({
  cache: new InMemoryCache(),
  uri: '/your-graphql-endpoint',
  defaultOptions: {
    watchQuery: {
      fetchPolicy: 'cache-and-network',
    },
    query: {
      fetchPolicy: 'cache-and-network',
    },
  },
});

这样所有查询都会默认先返回缓存，再请求服务器更新，完全符合你的需求～

内容的提问来源于stack exchange，提问作者somerandomusername