Apollo GraphQL React缓存优化：同一查询分字段取缓存与请求

你遇到的场景很典型——同一个查询里部分字段依赖某个参数，另一部分字段不依赖，想在参数变更时复用缓存里的静态字段，只请求动态字段。下面给你两种可行方案，以及你关心的性能和重渲染问题分析：

方案一：利用客户端缓存的字段级策略（以Apollo Client为例） #

如果用Apollo Client这类带缓存的GraphQL客户端，可以通过配置typePolicies让静态字段忽略assignedTo参数，直接从缓存读取，同时只更新动态的tiles字段。

配置示例：

const cache = new InMemoryCache({
  typePolicies: {
    Query: {
      fields: {
        workSummary: {
          // 指定哪些参数会影响缓存键（排除assignedTo）
          keyArgs: ['type', 'clientId', 'tileIds'],
          // 合并新旧数据，保留缓存中的静态字段
          merge(existing, incoming) {
            if (!existing) return incoming;
            return {
              ...existing,
              tiles: incoming.tiles, // 仅更新tiles
              averageRating: existing.averageRating || incoming.averageRating,
              ratingCount: existing.ratingCount || incoming.ratingCount,
            };
          },
        },
      },
    },
  },
});

这个配置的作用是：当assignedTo变化时，客户端仍会发起完整查询，但缓存会复用之前的averageRating和ratingCount，不会触发这两个字段的更新。缺点是服务器还是会返回完整的workSummary数据，会浪费一点带宽。

方案二：拆分为两个独立查询 #

这是更高效的方案，直接把静态字段和动态字段拆成两个查询：

查询1：获取静态评分数据 #

query GetWorkSummaryRatings($type: WorkSummaryType!, $clientId: ID) {
  workSummary(type: $type, clientId: $clientId) {
    averageRating
    ratingCount
  }
}

查询2：获取动态tiles数据 #

query GetWorkSummaryTiles($type: WorkSummaryType!, $assignedTo: [ID], $clientId: ID, $tileIds: [String!]) {
  workSummary(type: $type, assignedTo: $assignedTo, clientId: $clientId, tileIds: $tileIds) {
    tiles {
      id
      metricType
      value
      listDataType
      group
      groupOrder
      title
      subtitle
      color
      order
    }
  }
}

关于初始加载性能

客户端会并行发送这两个查询（比如Apollo Client的useQuery默认是并行请求），不会比单个查询慢——反而因为每个查询的数据量更小，服务器处理和网络传输的总耗时可能更短，几乎不会有性能损失。

关于重渲染

拆分后可以更精准地控制组件重渲染：

• averageRating和ratingCount只在初始加载时更新一次，后续不会变化，依赖这两个字段的组件部分不会触发重渲染；
• 只有当assignedTo变化导致tiles更新时，依赖tiles的组件部分才会重渲染，避免了原单个查询中任何字段变化就触发整个组件重渲染的问题。

方案选择建议 #

• 若不想修改现有查询结构，优先用字段级缓存策略，快速实现需求；
• 若追求更优的带宽利用和更可控的重渲染，拆分查询是更好的选择，初始加载的性能影响可以忽略，长期维护也更清晰。

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