TanStack React Query v5：useIsFetching匹配第二个queryKey无效问题求助

问题原因 #

React Query的useIsFetching默认采用前缀匹配规则：只有当你传入的queryKey是目标queryKey的左侧连续前缀时，才能匹配到对应的请求状态。

你的目标queryKey是["key1", "key2"]：

• 传入["key1"]时，是目标key的前缀，所以能匹配；
• 传入["key1", "key2"]时，是完整匹配，也能生效；
• 但传入["key2"]时，和目标key的前缀完全不重合，自然无法检测到该query的加载状态。

解决方案 #

要匹配queryKey中的特定位置元素，需要使用自定义匹配函数替代直接传入数组：

// 匹配所有queryKey第二个元素为"key2"的请求
const isFetching = useIsFetching({
  queryKey: (key) => key.length >= 2 && key[1] === "key2"
});

这个函数会遍历所有活跃的query，检查其queryKey的第二个元素是否等于"key2"，只要满足条件就会被计入isFetching的计数中。

如果需要更宽松的匹配（比如queryKey中任意位置包含"key2"），可以调整函数逻辑：

const isFetching = useIsFetching({
  queryKey: (key) => key.includes("key2")
});

验证说明 #

使用自定义匹配函数后，无论你的queryKey是["key1", "key2"]还是其他包含"key2"的结构，只要符合函数的判断条件，useIsFetching就能正确检测到对应的加载状态，从而触发你的加载动画。

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