如何使用React Query持续轮询API直至满足指定条件

要实现持续轮询API直到返回数据满足特定条件（比如name等于my-name），可以利用React Query中函数式的refetchInterval配置，结合查询结果动态决定是否继续轮询。以下是具体实现方案：

完整代码示例 #

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

// 你的API请求函数
const fetchApi = async () => {
  const res = await fetch('/target-api');
  return res.json();
};

const TargetComponent = () => {
  const fetchQuery = useQuery({
    queryKey: ['user-data'],
    queryFn: fetchApi,
    // 动态控制轮询间隔
    refetchInterval: (query) => {
      // 先判断数据是否存在，避免初始状态报错
      if (query.data?.name === 'my-name') {
        return false; // 满足条件，停止轮询
      }
      return 3000; // 未满足条件，每3秒轮询一次
    },
    // 自动启动轮询（若需手动触发，设为enabled: false，之后调用fetchQuery.refetch()）
    enabled: true,
    // 可选：关闭失败重试（根据业务需求调整）
    retry: 0,
  });

  return (
    <div>
      {fetchQuery.isLoading && <p>加载中...</p>}
      {fetchQuery.error && <p>请求失败：{fetchQuery.error.message}</p>}
      {fetchQuery.data && (
        <div>
          <p>当前Name: {fetchQuery.data.name}</p>
          {fetchQuery.data.name === 'my-name' && <p>✅ 已获取目标数据，轮询已停止</p>}
        </div>
      )}
      {/* 手动触发按钮（enabled设为false时启用） */}
      {/* <button onClick={() => fetchQuery.refetch()} disabled={fetchQuery.isFetching}>
        开始轮询
      </button> */}
    </div>
  );
};

export default TargetComponent;

关键逻辑说明 #

1. 函数式refetchInterval：
   该配置接收一个函数，参数query包含当前查询的所有状态和数据。通过query.data可以访问API返回的结果，以此判断是否满足终止条件。

   • 返回false：立即停止轮询
   • 返回数值：设置下一次轮询的间隔（毫秒）

2. 数据存在性判断：
   必须先检查query.data是否存在，因为初始请求未完成时data为undefined，直接访问query.data.name会导致报错。

3. 启动方式控制：

   • 自动启动：将enabled设为true，组件挂载后自动发起第一次请求并进入轮询
   • 手动启动：保持enabled: false，通过调用fetchQuery.refetch()触发第一次请求，之后自动按规则轮询

额外注意事项 #

• 若API请求失败，React Query默认会重试，可通过retry选项调整重试次数（如retry: 0关闭重试）
• 停止轮询后，若后端数据发生变化，不会自动重新轮询；如需监听后续变化，可结合refetchIntervalInBackground或其他业务逻辑处理

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