如何基于apollo-boost结合apollo-cache-persist实现缓存持久化？

没问题，我来帮你搞定用apollo-boost结合apollo-cache-persist实现缓存持久化的事儿，基于你现有的ApolloClient配置，只需要几步简单改造就行：

步骤1：安装依赖 #

首先得装个专门的持久化库，apollo-cache-persist是Apollo生态里官方支持的工具，直接用包管理器安装：

npm install apollo-cache-persist
# 或者用yarn
yarn add apollo-cache-persist

步骤2：改造你的ApolloClient配置 #

原来的代码是直接创建ApolloClient实例，现在我们需要先手动创建InMemoryCache（apollo-boost内部默认用的就是这个缓存），配置持久化规则，再把你原来的clientState配置迁移到缓存上，最后再创建ApolloClient：

完整改造后的代码 #

import { ApolloClient, InMemoryCache } from 'apollo-boost';
import { persistCache } from 'apollo-cache-persist';

// 1. 先创建一个空的InMemoryCache实例
const cache = new InMemoryCache();

// 2. 迁移你原来的clientState.defaults：写入本地默认状态
cache.writeData({
  data: {
    networkStatus: {
      __typename: 'NetworkStatus',
      isConnected: false,
    },
  },
});

// 3. 迁移你原来的clientState.resolvers：设置本地状态的更新逻辑
cache.writeResolvers({
  Mutation: {
    updateNetworkStatus: (_, { isConnected }, { cache }) => {
      cache.writeData({
        data: {
          networkStatus: {
            __typename: 'NetworkStatus',
            isConnected,
          },
        },
      });
      return null;
    },
  },
});

// 4. 配置缓存持久化（这是个异步操作，必须等它完成再创建client）
persistCache({
  cache, // 要持久化的缓存实例
  storage: window.localStorage, // 浏览器环境用localStorage存，React Native用AsyncStorage
  // 可选配置：自定义存储的key、开启调试日志等
  key: 'apollo-suppliers-cache',
  debug: true,
}).then(() => {
  // 5. 缓存持久化配置完成后，创建最终的ApolloClient
  const client = new ApolloClient({
    uri: 'http://localhost:8080/_/service/com.suppliers/graphql',
    cache, // 把配置好的带持久化的缓存传进去
  });

  // 这里把client传给你的ApolloProvider或者其他业务代码就行
  // 比如React项目里：ReactDOM.render(<ApolloProvider client={client}>...</ApolloProvider>, root);
});

关键细节说明 #

• 为什么要迁移clientState？：apollo-boost的clientState选项其实是封装了本地状态管理的逻辑，当我们手动创建缓存实例时，直接用cache.writeData和cache.writeResolvers就能实现完全一样的功能，不需要再用clientState这个选项了。
• 必须异步初始化：persistCache是异步的，它需要先从本地存储加载之前缓存的数据，所以一定要在它的then回调里创建ApolloClient，不然会出现缓存没加载完就初始化client，导致初始状态丢失的问题。
• 存储方案可选：除了window.localStorage，你还可以用sessionStorage（会话结束就清空），如果是React Native项目，换成AsyncStorage就行（记得先装对应的包）。
• 精细控制持久化范围：如果不想把所有数据都持久化，可以加whitelist或blacklist选项，比如whitelist: ['NetworkStatus']就只会持久化NetworkStatus类型的数据。

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