如何在react-query v3的QueryOptions中利用查询结果控制重取？

你遇到的错误是因为在useQuery的配置项里提前引用了还未被声明的data变量——毕竟data是useQuery执行后才返回的结果，直接在初始化时引用会形成循环依赖，触发TypeScript的变量提前使用和类型推断错误。

下面是两种可行的解决方案：

方案一：利用refetchInterval的函数形式（推荐） #

React Query v3允许refetchInterval接收一个函数，函数参数会传入当前查询的状态对象，其中包含最新的data。我们可以在这个函数里根据数据状态决定是否继续重取：

const { isLoading, data } = useQuery(
  ["data-querykey", id], // 建议用数组作为查询键，更符合React Query的最佳实践
  () => api.getData({ id }),
  {
    refetchInterval: (queryState) => {
      // 若数据状态为finished，返回false停止重取；否则保持3000ms的重取间隔
      return queryState.data?.state !== "finished" ? 3000 : false;
    },
  }
);

这种方法无需额外状态管理，直接利用React Query的内置能力就能实现需求。

方案二：通过状态变量控制enabled #

如果更倾向于用enabled字段来控制查询的激活状态，可以结合useState和useEffect实现：

import { useState, useEffect } from 'react';
import { useQuery } from 'react-query';

// 初始化enabled为true，允许查询执行
const [enabled, setEnabled] = useState(true);

const { isLoading, data } = useQuery(
  ["data-querykey", id],
  () => api.getData({ id }),
  {
    enabled,
    refetchInterval: enabled ? 3000 : false,
  }
);

// 监听data变化，当状态为finished时禁用查询
useEffect(() => {
  if (data?.state === "finished") {
    setEnabled(false);
  }
}, [data]);

这种方法通过外部状态间接控制查询的激活状态，适合需要更细粒度控制查询生命周期的场景。

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