如何让React Query useQuery的refetchInterval在3次重取后停止？

可以通过状态跟踪重取次数结合refetchInterval的动态配置来实现需求，具体方案如下：

• 用useState维护一个计数器，记录自动重取的执行次数
• 在useQuery的onSuccess回调中，每次成功重取后递增计数器
• 将refetchInterval设为动态函数：当计数器未达到3次时返回3000毫秒，达到阈值后返回false终止自动重取

修改后的完整代码 #

import { useQuery, useState } from '@tanstack/react-query';
import axios from 'axios';

// 假设devices和myHeaders已在组件外部定义
const YourComponent = () => {
  const [refetchCount, setRefetchCount] = useState(0);

  const fetchData = () => {
    // 原代码返回Promise数组，需用Promise.all包裹让React Query正确处理异步结果
    return Promise.all(devices?.map(async (id) => {
      const res = await axios.get(`https://www.roads.com/road/api/roadControl/${id}`, myHeaders);
      return res.data;
    }) || []);
  };

  const { data } = useQuery("post", fetchData, {
    // 动态控制重取间隔：次数未达3次时继续，否则停止
    refetchInterval: () => refetchCount < 3 ? 3000 : false,
    // 每次成功重取后更新计数器
    onSuccess: () => {
      // 初始加载不算自动重取，仅在自动触发的重取中递增计数
      // 若需将初始加载计入3次内，直接移除if判断即可
      if (refetchCount < 3) {
        setRefetchCount(prev => prev + 1);
      }
    }
  });

  return (
    <div>{/* 此处编写数据渲染逻辑 */}</div>
  );
};

export default YourComponent;

关键细节说明 #

• 原fetchData返回的是Promise数组，必须用Promise.all包裹，否则React Query无法正确解析异步结果
• refetchInterval支持传入函数，可根据当前状态动态返回间隔时长或false（停止重取）
• onSuccess中的条件判断用于避免计数器无限递增，仅在需要的次数内更新状态

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