React Apollo useQuery客户端缓存：三种组件数据方案优劣及官方推荐

背景说明 #

我们的React组件结构如下：

<Tree>
    <TreeTrunkDetails/>
    <TreeLeavesDetails/>
</Tree>

同时有一个封装useQuery的自定义钩子useTree，用于查询以下GraphQL数据：

tree {
  specie
  genus
  leaves {
    shape
    size
  }
  trunk {
    bark
    diameter
  }
}

下面分析三种数据实现方案的优缺点，以及Apollo团队的推荐实践。

方案1：父组件统一查询，通过props传递数据 #

优点 #

• 只触发一次GraphQL请求，减少网络开销，性能表现稳定
• 数据流向清晰，父组件把控所有数据，子组件只负责渲染，职责划分明确
• 无需依赖缓存逻辑，代码简单直接，容易理解和调试

缺点 #

• 父组件会随着子组件数据需求的增加而逐渐臃肿，维护成本上升
• 子组件完全依赖父组件传递数据，耦合度高，后续子组件新增数据需求时，必须修改父组件的查询逻辑和props传递
• 即使子组件只需要部分数据，父组件仍需查询完整数据集，存在数据冗余

方案2：多组件复用同一useTree钩子，依赖客户端缓存 #

优点 #

• 组件解耦，每个组件独立调用钩子获取数据，不需要父组件传递props，避免props drilling
• Apollo客户端会自动缓存查询结果，多个组件调用同一钩子只会发起一次实际网络请求，不会重复请求
• 组件职责独立，修改单个组件的数据需求时，不需要改动其他组件

缺点 #

• 所有组件都查询完整的tree数据集，哪怕只用到其中一小部分，存在过度获取数据的问题
• 完全依赖缓存的正确性，如果缓存配置（比如缓存键、失效策略）出问题，可能导致数据不一致
• 后续调整查询字段时，所有使用该钩子的组件都会受影响，维护成本高

方案3：拆分多个自定义钩子，组件按需查询特定数据 #

优点 #

• 数据查询精准，每个组件只获取自身需要的字段，减少数据传输量，提升性能
• 每个钩子职责单一，对应特定的数据需求，代码更易维护和复用
• 组件与数据查询的耦合度低，修改某个组件的数据需求只需调整对应的钩子，不影响其他组件

缺点 #

• 若多个组件需要重叠的数据字段，可能触发多次重复请求（除非配置了字段级缓存或缓存合并）
• 钩子数量增多，增加了代码量和管理成本，需要维护多个钩子的逻辑
• 跨组件共享数据时，需要依赖缓存或状态管理，逻辑相对复杂

Apollo团队推荐实践 #

Apollo官方的核心思路是组件级按需获取数据+精准查询+合理利用缓存，具体推荐：

1. 优先让组件独立获取数据，避免props drilling，保持组件的独立性
2. 推荐使用useFragment钩子：父组件可以查询基础数据，子组件通过useFragment获取所需的字段片段——这种方式既避免了props传递，又能精准获取子组件需要的数据，同时利用Apollo的缓存机制保证性能
3. 如果组件的需求差异较大，建议拆分针对性的自定义钩子（类似方案3），但要利用Apollo的字段级缓存能力，避免重复请求
4. 不要过度复用通用钩子，如果通用钩子包含大量组件不需要的字段，会导致数据冗余，反而影响性能

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