Apollo Client 中 TypePolicy 配置的正确使用方式

在 Apollo Client 项目中，开发者经常会遇到需要自定义缓存行为的需求。TypePolicy 是一个强大的工具，它允许我们为 GraphQL 类型定义特定的缓存策略。然而，很多开发者在使用时会犯一个常见错误——将 TypePolicy 配置放在了错误的位置。

问题背景

在 Apollo Client 的缓存系统中，InMemoryCache 是核心组件，负责管理所有从 GraphQL 查询返回的数据。TypePolicy 作为 InMemoryCache 的配置项，允许我们为特定类型定义如何读取、合并和序列化数据。

常见错误配置

许多开发者会错误地将 TypePolicy 直接传递给 ApolloClient 构造函数，就像这样：

const client = new ApolloClient({
  typePolicies: {  // 这是错误的位置
    Person: {
      fields: {
        name: {
          read(name) {
            return name.toUpperCase();
          }
        }
      }
    }
  }
});

这种配置方式会导致 TypePolicy 完全被忽略，因为 ApolloClient 并不直接处理这些缓存策略。

正确配置方式

正确的做法是将 TypePolicy 作为 InMemoryCache 的配置项：

const client = new ApolloClient({
  cache: new InMemoryCache({
    typePolicies: {  // 正确的位置
      Person: {
        fields: {
          name: {
            read(name) {
              return name.toUpperCase();
            }
          }
        }
      }
    }
  })
});

TypePolicy 的工作原理

当 InMemoryCache 接收到数据时，它会根据 typePolicies 中定义的规则来处理数据：

1. 首先检查是否有为该类型定义的策略
2. 如果有字段级别的 read 函数，会调用该函数处理数据
3. 处理后的数据会被存储在缓存中
4. 后续查询会直接使用缓存中处理过的数据

实际应用场景

TypePolicy 的常见使用场景包括：

1. 数据格式化（如将字符串转为大写）
2. 自定义字段合并逻辑
3. 实现客户端计算的派生字段
4. 处理特殊的数据结构（如日期对象）

最佳实践建议

1. 始终将 typePolicies 放在 InMemoryCache 配置中
2. 为复杂的业务对象定义明确的缓存策略
3. 在 read 函数中保持纯函数特性，避免副作用
4. 对于敏感数据，可以在 read 函数中添加额外的处理逻辑

通过正确使用 TypePolicy，开发者可以更精细地控制 Apollo Client 的缓存行为，提升应用性能和用户体验。