TanStack Query中useQueries返回结果顺序问题解析

在TanStack Query库中，开发者们发现了一个关于useQueries Hook的有趣问题。当使用包含重复且未排序查询的数组调用useQueries时，返回结果的顺序与预期不符。这个问题虽然看似简单，但涉及到React Query核心机制中的一些重要概念。

问题现象

当开发者使用如下方式调用useQueries时：

useQueries([
  { queryKey: ['A'] },
  { queryKey: ['B'] },
  { queryKey: ['A'] }
])

期望的返回结果顺序应该是：

1. 第一个查询'A'的结果
2. 查询'B'的结果
3. 第二个查询'A'的结果

然而实际返回的顺序却是：

1. 第一个查询'A'的结果
2. 第二个查询'A'的结果
3. 查询'B'的结果

问题根源

经过深入分析，问题出在QueriesObserver的findMatchingObservers方法中。该方法在处理查询数组时，默认按照queryHash进行排序，而不管原始数组的顺序如何。这种设计初衷可能是为了提高查询效率，但却破坏了返回结果与输入顺序的一致性。

技术原理

在React Query的内部实现中，useQueries依赖于QueriesObserver来管理多个查询。每个查询都会被分配一个唯一的queryHash，这是基于queryKey计算得到的哈希值。当处理重复查询时，系统会尝试复用已有的查询实例，而不是创建新的实例。

findMatchingObservers方法的核心职责是匹配现有的观察者(observers)与新的查询选项。在这个过程中，它会对查询进行排序，以确保高效的匹配操作。然而，正是这个排序步骤导致了返回结果顺序的混乱。

影响范围

这个问题会影响所有使用useQueries并包含重复查询的场景，特别是在以下情况：

1. 需要严格保持结果顺序的UI渲染
2. 依赖于结果顺序的业务逻辑
3. 需要区分相同查询不同实例的场景

解决方案

社区已经提出了修复方案，主要思路是：

1. 保留原始查询数组的顺序信息
2. 在匹配观察者时，不再强制排序
3. 确保返回结果顺序与输入顺序严格一致

这个修复保持了React Query的核心功能，同时解决了顺序不一致的问题，为开发者提供了更可预测的行为。

最佳实践

为了避免类似问题，开发者在使用useQueries时应注意：

1. 尽量避免使用完全相同的queryKey
2. 如果需要区分相同查询的不同实例，可以考虑添加唯一标识符
3. 对于顺序敏感的场景，可以在查询选项中添加额外字段来维护顺序

总结

这个案例展示了库设计中一个常见的权衡：性能优化与行为一致性之间的平衡。React Query团队通过社区反馈及时发现了这个问题，并提出了合理的解决方案，体现了开源协作的优势。对于开发者而言，理解这类底层机制有助于更好地使用工具库，并在遇到类似问题时能够快速定位原因。