如何在mutation后更新Apollo Client缓存？页面刷新变更丢失求助

我太懂这种郁闷了——手动用writeQuery更新了缓存，页面一刷新就打回原形，第二次刷新才正常，简直离谱！结合你提到的Apollo文档说明（writeQuery和writeFragment的变更在重新加载环境后会消失），咱们一步步来解决：

核心根源 #

writeQuery只是修改了内存中的Apollo缓存，页面刷新后内存缓存会被清空，Apollo会重新从服务器拉取数据。如果第一次刷新时Apollo默认用了cache-first策略，或者服务器端缓存还没同步mutation的变更，就会出现这种“刷新两次才正常”的情况。

靠谱解决方案 #

1. 配置持久化缓存（最彻底的解决方式） #

把Apollo的缓存持久化到本地存储（比如localStorage），这样writeQuery的变更会被保存下来，刷新页面后缓存不会丢失。

步骤如下：

• 安装依赖：

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

• 在Apollo Client初始化时配置持久化：

  import { ApolloClient, InMemoryCache } from '@apollo/client';
  import { persistCache, LocalStorageWrapper } from 'apollo3-cache-persist';
  
  const cache = new InMemoryCache();
  
  // 初始化持久化缓存
  persistCache({
    cache,
    storage: new LocalStorageWrapper(window.localStorage),
    // 可选：设置需要持久化的字段，或者排除不需要的
    // whitelist: ['user', 'posts'],
    // blacklist: ['tempData'],
  }).then(() => {
    // 缓存持久化初始化完成后再创建Client
    const client = new ApolloClient({
      cache,
      uri: '/graphql', // 你的GraphQL端点
    });
    // 把client传入ApolloProvider
  });
  

这样不管怎么刷新，writeQuery的变更都会保存在localStorage里，页面加载时会自动恢复缓存状态。

2. 用mutation的update函数替代手动writeQuery #

手动调用writeQuery容易出错，不如直接在mutation的update函数里处理缓存更新，Apollo会自动帮你管理缓存的一致性：

import { useMutation } from '@apollo/client';
import { UPDATE_POST } from './graphql/mutations';

function UpdatePostButton({ postId, newContent }) {
  const [updatePost] = useMutation(UPDATE_POST, {
    variables: { postId, newContent },
    update(cache, { data: { updatePost } }) {
      // 直接从缓存中读取对应的查询，然后更新
      const { post } = cache.readQuery({
        query: GET_POST,
        variables: { postId },
      });
      cache.writeQuery({
        query: GET_POST,
        variables: { postId },
        data: { post: { ...post, content: updatePost.content } },
      });
    },
  });

  return <button onClick={updatePost}>更新帖子</button>;
}

这种方式和Apollo的缓存系统集成更紧密，比手动调用writeQuery更可靠。

3. 优化cache-and-network的用户体验 #

如果你已经用了cache-and-network但不想先显示旧视图，可以通过loading状态来控制UI：

import { useQuery } from '@apollo/client';
import { GET_POSTS } from './graphql/queries';

function PostsList() {
  const { loading, data, refetch } = useQuery(GET_POSTS, {
    fetchPolicy: 'cache-and-network',
  });

  // 当loading为true时，显示加载状态，而不是旧数据
  if (loading) return <div>加载中...</div>;

  return (
    <div>
      {data.posts.map(post => <div key={post.id}>{post.content}</div>)}
    </div>
  );
}

或者在mutation完成后主动调用refetch，确保数据是最新的：

const [updatePost] = useMutation(UPDATE_POST, {
  onCompleted() {
    refetch();
  },
});

4. 检查服务器端缓存 #

如果上述方法都没用，那可能是服务器端的缓存问题（比如CDN、HTTP缓存或者GraphQL服务器的缓存）。可以检查GraphQL请求的响应头，看看有没有Cache-Control之类的缓存指令，或者在mutation完成后让服务器返回最新的数据，确保第一次刷新时能拿到最新结果。

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