React Apollo：apollo-cache-persist 功能异常及离线缓存问题咨询

我之前也踩过类似的坑，一开始确实容易对apollo-cache-persist的功能产生误解——以为它能直接读取缓存响应来支持离线应用，但实际得注意缓存恢复的时机问题。

你遇到的现象非常典型：

• 使用fetchPolicy: 'cache-only'时，组件显示‘no data’
• 用默认的cache-first策略能拿到预期结果，但会发起不必要的网络请求

这本质上是因为缓存还没从localStorage异步恢复完成，组件就已经发起了查询请求。apollo-cache-persist的缓存加载是异步过程，如果在缓存就绪前执行cache-only查询，自然拿不到数据。

已验证的解决方法： #

1. 等待缓存恢复完成后再初始化应用
   这是最稳妥的临时方案，确保应用启动时缓存已经完全加载。示例代码如下：

   import { persistCache } from 'apollo-cache-persist';
   import { InMemoryCache } from 'apollo-cache-inmemory';
   import ApolloClient from 'apollo-client';
   import { ApolloProvider } from '@apollo/react-hooks';
   import ReactDOM from 'react-dom';
   
   const cache = new InMemoryCache();
   // 初始化缓存持久化
   const persistCachePromise = persistCache({
     cache,
     storage: window.localStorage,
   });
   
   // 等待缓存恢复完成后再创建客户端并渲染应用
   persistCachePromise.then(() => {
     const client = new ApolloClient({
       cache,
       uri: '你的GraphQL端点',
     });
     ReactDOM.render(
       <ApolloProvider client={client}>
         {/* 你的应用根组件 */}
       </ApolloProvider>,
       document.getElementById('root')
     );
   });
   

2. 结合Daniel的解决方案
   搭配Daniel提供的优化方案（核心也是解决缓存就绪时机的问题），可以进一步确保查询执行时缓存已经加载完成，彻底避免cache-only策略下无数据的情况。

调整后，不管是离线场景下的cache-only查询，还是默认的cache-first策略，都能正常读取localStorage中的缓存数据，同时避免不必要的网络请求。

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