如何让Apollo缓存复用Book对象以适配React PureComponent？

这个场景我太熟悉了！核心问题在于Apollo Client默认的处理逻辑：哪怕缓存里已经有了对应的数据，每次查询返回时它都会重新创建新的对象引用，这就导致React的PureComponent没法通过引用对比来跳过重渲染。要搞定这个，关键是让Apollo复用缓存里的同一个对象实例，而不是每次都生成新的。下面是具体的解决步骤：

1. 确保查询返回唯一标识字段 #

Apollo的归一化缓存依赖唯一ID来识别不同的对象，所以你的GraphQL查询必须返回Book的唯一标识字段（比如id、_id）。举个正确的查询例子：

query GetBooks {
  books {
    id # 必须要有这个唯一标识
    title
    author
  }
}

2. 配置Apollo缓存的对象识别规则 #

根据你使用的Apollo Client版本，配置对应的缓存策略，明确告诉Apollo如何生成Book对象的唯一缓存ID：

针对Apollo Client 3.x+（推荐） #

用typePolicies指定每个类型的唯一标识字段：

import { ApolloClient, InMemoryCache } from '@apollo/client';

const client = new ApolloClient({
  uri: '/your-graphql-endpoint',
  cache: new InMemoryCache({
    typePolicies: {
      Book: {
        keyFields: ['id'], // 告诉Apollo用id作为Book的唯一标识
      },
    },
  }),
});

针对Apollo Client 2.x #

用dataIdFromObject函数自定义缓存ID生成逻辑：

import { ApolloClient, InMemoryCache, defaultDataIdFromObject } from 'apollo-boost';

const client = new ApolloClient({
  uri: '/your-graphql-endpoint',
  cache: new InMemoryCache({
    dataIdFromObject: object => {
      switch (object.__typename) {
        case 'Book':
          return `Book:${object.id}`; // 为每个Book生成唯一的缓存ID
        default:
          return defaultDataIdFromObject(object); // 其他类型沿用默认逻辑
      }
    },
  }),
});

3. 避免强制刷新的查询策略 #

确保你的组件使用useQuery时，没有设置fetchPolicy: 'network-only'或no-cache——这两个策略会强制从服务器拉取数据并生成新对象。默认的cache-first（优先用缓存）或cache-and-network（先读缓存再更新）才会复用缓存对象：

import { useQuery } from '@apollo/client';
import GET_BOOKS from './queries/GetBooks';

function BookList() {
  const { data } = useQuery(GET_BOOKS, {
    // 保持默认策略即可，不需要额外配置fetchPolicy
    // fetchPolicy: 'cache-first' // 可选，默认就是这个
  });

  return (
    <div>
      {data?.books.map(book => (
        <BookItem key={book.id} book={book} />
      ))}
    </div>
  );
}

4. 验证效果 #

你可以在组件里打印两次查询后的Book对象引用，比如：

console.log(data.books[0] === prevData.books[0]);

如果返回true，说明Apollo已经在复用同一个对象实例了，此时PureComponent就能正确识别并跳过不必要的重渲染。

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