refetchInterval与QueryKey变更是否会触发两次网络请求？

问题背景 #

全局配置了2秒的refetchInterval，但UI一直处于加载状态，推测是useGetOffset hook响应耗时约5秒，导致该查询持续发起新请求，无法进入完成状态。
现有两个关联hook：

• useGetOffset：调用后大多返回递增数值（如1、2、3、4），偶尔不变
• useGetBilling：将useGetOffset的返回值作为查询键（query key）的一部分

核心疑问 #

由于全局2秒重取间隔，useGetOffset和useGetBilling每2秒都会重取。当useGetOffset的返回值变化时，useGetBilling会不会被触发两次？一次是query key变更引发的新查询，另一次是refetchInterval触发的旧key查询？

时间线分析 #

针对你设想的场景：

• 时间0：useGetOffset返回0，触发useGetBilling(0)的查询
• 时间2：useGetOffset返回1，此时会触发useGetBilling(1)的新查询，但不会再触发useGetBilling(0)的重取

原因是：React Query中，当组件不再使用某个query key（比如useGetBilling(0)的key被新的1替代），旧查询会被标记为inactive状态。只有处于active状态的查询（当前组件正在订阅的查询）才会执行refetchInterval的自动重取逻辑，inactive查询不会再触发重取。

解决方案 #

1. 解决UI持续加载问题 #

针对useGetOffset响应慢的情况，避免它因重取间隔过短导致请求堆积：

useGetOffset({
  // 当查询正在进行时，暂停重取
  refetchInterval: (query) => query.isFetching ? false : 2000
});

这样就能防止旧请求还没完成，新的重取请求就发起，从而让查询能正常进入完成状态。

2. 全局重取间隔+超时查询自动暂停 #

要实现「全局应用2秒重取间隔，但响应耗时超过2.5秒的查询自动暂停重取」，可以给每个查询设置动态的refetchInterval：

useGetBilling(offset, {
  refetchInterval: (query) => {
    // 两种情况暂停重取：当前正在请求，或上次请求耗时超过2500ms
    const lastRequestDuration = Date.now() - query.state.dataUpdatedAt;
    if (query.isFetching || lastRequestDuration > 2500) {
      return false; // 暂停重取
    }
    return 2000; // 正常使用全局间隔
  }
});

如果要全局统一配置，可以在创建QueryClient时设置defaultOptions：

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      refetchInterval: (query) => {
        const lastRequestDuration = Date.now() - query.state.dataUpdatedAt;
        return query.isFetching || lastRequestDuration > 2500 ? false : 2000;
      }
    }
  }
});

额外说明 #

• React Query的refetchInterval只会作用于active状态的查询，当query key变化后，旧查询自动变为inactive，不会再触发重取
• 动态refetchInterval支持返回false或0来暂停重取，返回数值则启用对应间隔的重取

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