TanStack Query中combine函数处理空数组时的isPending状态问题

在React应用开发中，TanStack Query（原React Query）是一个非常流行的数据获取库。它提供了useQuery和useQueries等钩子来简化数据获取和状态管理。然而，在使用这些钩子时，开发者可能会遇到一些状态管理上的陷阱，特别是在处理组合查询结果时。

问题背景

当开发者使用useQueries结合自定义的combine函数来处理多个查询结果时，可能会遇到一个常见的问题：isPending状态在空数组情况下返回false，导致加载状态显示不正确。具体表现为：

1. 初始加载时，加载指示器短暂出现后消失
2. 随后出现内容闪烁（显示不完整的数据）
3. 加载指示器再次出现
4. 最终显示完整内容

这种用户体验问题源于combine函数中对空数组的处理逻辑不够完善。

问题分析

在TanStack Query中，useQueries返回一个查询结果数组，开发者通常会编写一个combine函数来合并这些结果。常见的实现方式是：

const isPending = results.some((result) => result.isPending);

这种实现方式在results数组为空时会返回false，因为空数组的.some()总是返回false。这在逻辑上是不正确的——当没有查询结果时，应用实际上仍处于加载状态。

解决方案

正确的处理方式应该显式检查空数组情况：

const isPending = results.length === 0 || results.some((result) => result.isPending);

这种实现确保了：

1. 当没有查询结果时（初始状态），isPending为true
2. 当有任何查询仍在加载时，isPending为true
3. 只有当所有查询都完成且结果不为空时，isPending才为false

最佳实践

在处理组合查询状态时，建议考虑以下几点：

1. 初始状态处理：明确区分"无数据"和"加载中"状态
2. 错误处理：除了isPending，还应正确处理isError状态
3. 性能优化：避免不必要的重新渲染，可以使用useMemo优化组合结果
4. 用户体验：考虑添加防闪烁机制，避免短暂的内容闪现

总结

TanStack Query提供了强大的数据获取能力，但在处理复杂场景时需要开发者注意细节。特别是在组合多个查询结果时，状态管理逻辑需要更加严谨。正确处理空数组情况可以避免UI闪烁问题，提供更流畅的用户体验。

记住，良好的状态管理不仅关乎功能实现，更关乎用户体验。在数据获取场景中，正确处理加载状态是构建高质量React应用的关键一环。