使用apollo-link-batch-http时生成多批次而非单个GraphQL请求的问题

核心问题定位 #

• 现有batchKey配置直接拆分了独立批次：代码中通过operation.operationName.endsWith('Query')做分支判断，把命名符合规则的查询归入batch1，其余归入batch2，两个批次独立统计、独立触发发送，从规则层面就不可能把所有9个查询凑进同一个HTTP请求。
• 批处理默认等待窗口过短，无法覆盖嵌套组件的查询触发节奏：BatchHttpLink的聚合适配机制为，仅会将同一个batchKey下、在固定时间窗口内触发的查询打包发送。默认的时间窗口（batchInterval）仅为10ms，而你的9个查询分布在ApolloProvider嵌套的多层子Provider中，React组件从外到内逐层挂载，每一层Provider的useQuery触发动作分散在不同的渲染提交阶段，时间差很容易超过10ms，导致前面触发的请求等不到后续查询就提前发出，最终出现部分请求聚合4个查询、部分请求单独发送的情况。
• 未根据实际场景匹配批处理参数：没有针对初始化阶段拉取全量公共数据的场景调整参数，默认参数的阈值无法适配多层Provider的查询触发节奏。

落地修复步骤 #

• 移除会拆分批次的batchKey判断逻辑：所有初始化阶段需要聚合的查询，统一返回固定的batchKey值，从规则上把所有查询归到同一个统计组下，示例代码：

  // 取消分支判断，所有初始化请求统一归属同一个批
  batchKey: () => 'app-init-common-batch'
  

  注意：batchKey的设计初衷是隔离需要独立发送的请求（比如用户登录后的实时数据请求、和初始化拉取的静态配置请求），如果你的9个查询都是应用初始化必须加载的公共数据，没有隔离需求，就不要做多分支判断。
• 调整批处理等待窗口，留足时间等齐所有触发的查询：将batchInterval设置为300ms-500ms，足够覆盖React从最外层App到最内层PaymentMethodProvider全部挂载完成、所有useQuery触发网络请求的总耗时，避免提前触发发送。
• 匹配预期的聚合数量设置batchMax：将参数设置为和初始化需要拉取的总查询数一致（比如9），确保凑齐足够数量的请求后再真正发起HTTP调用。
• 排查易忽略的干扰项：
  • 检查ApolloProvider外层的组件（比如AppStateProvider）是否存在GraphQL请求：这部分组件因为在ApolloProvider外层，使用的不是配置了BatchHttpLink的客户端，发出的请求不会参与批处理，会单独占用一个HTTP请求。
  • 检查缓存命中情况：当前从window.__APOLLO_CLIENT__恢复了已有缓存，如果部分查询已经命中缓存，对应的useQuery不会触发网络请求，最终参与聚合的请求数量会低于9个。

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