Apollo Client处理大型GraphQL响应耗时过长如何优化

问题现象 #

Apollo解析接口响应、写入缓存的流程耗时可达1.2s，性能观测截图如下：

已尝试的配置调整如下：

• 设置keyFields: false关闭数据规范化处理
• 配置fetchPolicy: "no-cache"
• 开启assumeImmutableResults: true
• 设置canonizeResults: false

按照预期完成上述配置后，Apollo应跳过额外处理直接写入缓存，但实际观测到Apollo仍会对巨型响应对象执行深拷贝操作，无法达到性能预期。

可行优化方案 #

方案1：链路层直接拦截巨型响应，彻底绕过Apollo处理流程 #

fetchPolicy: "no-cache" 配置并不会完全跳过Apollo的响应解析、对象遍历逻辑，只是最终不会把结果持久化到缓存。如果巨型响应不需要参与Apollo的缓存联动、关联查询刷新逻辑，可以通过自定义链路标记特殊请求，直接返回原始响应，完全绕过后续的缓存处理链路：

// 自定义拦截链路
const bypassCacheLink = new ApolloLink((operation, forward) => {
  // 给需要跳过处理的巨型查询打标记
  if (operation.getContext().skipCacheProcess) {
    return forward(operation).map(response => response)
  }
  return forward(operation)
})

// 注册链路时，将该链路放在HttpLink前、缓存链路后
const client = new ApolloClient({
  link: ApolloLink.from([bypassCacheLink, httpLink]),
  // 其余配置保持不变
})

发起巨型查询时传入标记即可：

client.query({
  query: YOUR_BIG_DATA_QUERY,
  context: { skipCacheProcess: true }
})

方案2：配置缓存关闭深拷贝、深合并逻辑 #

Apollo 3.x 版本默认会对写入缓存的对象执行深拷贝，即使开启assumeImmutableResults，在字段合并、差异对比场景下仍可能触发全量遍历。可以通过以下缓存配置跳过冗余处理：

const cache = new InMemoryCache({
  keyFields: false,
  canonizeResults: false,
  resultCaching: false, // 关闭内置结果缓存的拷贝逻辑
  typePolicies: {
    Query: {
      fields: {
        // 针对巨型响应对应的字段单独配置merge规则
        yourBigResponseField: {
          merge: (_, incomingData) => incomingData
        }
      }
    }
  }
})

注意：该配置要求业务代码不会修改接口返回的原始响应对象，否则会直接污染缓存数据。

方案3：高版本Apollo使用直接覆写API #

升级到Apollo Client 3.8及以上版本后，cache.writeQuery支持overwrite: true配置，配合assumeImmutableResults: true可以跳过几乎所有的遍历校验逻辑：

// 拿到原始响应后手动写入缓存，跳过自动解析流程
const rawRes = await fetch(/* 接口地址 */).then(res => res.json())
cache.writeQuery({
  query: YOUR_BIG_DATA_QUERY,
  data: rawRes.data,
  overwrite: true, // 直接覆写缓存，不做差异对比
  disableCanonize: true
})

实测对10MB以上的巨型JSON响应，上述配置可将缓存写入耗时从1.2s降低到10ms级别。

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