React Apollo中子对象更新时如何防止父缓存对象自动失效重查

问题根因 #

这个问题是Apollo Client默认的规范化缓存逻辑导致的：metrics作为无参数的根查询字段，返回的对象会被缓存视为同一个实体，当第二个查询返回metrics下的memory字段时，默认逻辑会触发所有依赖metrics实体的活跃查询进行重检，导致只需要cpu字段的查询被误判需要重查。

解决方案 #

方案1：全局配置字段合并策略（推荐） #

在初始化InMemoryCache时给metrics字段配置合并规则，告诉缓存多次返回的metrics字段需要合并而非替换，不会触发不必要的重查：

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

const client = new ApolloClient({
  uri: '你的GraphQL服务地址',
  cache: new InMemoryCache({
    typePolicies: {
      Query: {
        fields: {
          metrics: {
            // metrics字段无参数，不需要按参数拆分缓存
            keyArgs: false,
            // 自定义合并逻辑，新旧数据字段合并
            merge(existing = {}, incoming) {
              return {
                ...existing,
                ...incoming
              };
            }
          }
        }
      }
    }
  })
});

该配置全局生效，后续新增disk或其他metrics下的子字段查询，都不会触发同命名空间下已有其他查询的重查。

方案2：单个查询关闭部分重取 #

如果你不需要全局修改配置，只需要避免特定查询被误触发重查，可以在调用useQuery时添加partialRefetch: false参数：

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

function CpuMetrics() {
  const { data, loading } = useQuery(MetricsCPU, {
    // 关闭部分重取，只要当前查询需要的字段在缓存中存在就不会重查
    partialRefetch: false
  });

  // 组件业务逻辑
}

两种方案可以按需选择，优先推荐方案1，更符合命名空间类型的缓存设计逻辑。

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