如何防止react-query在初始时获取数据但允许重新获取?

Question

我正在使用 react-query v3.13 从API获取数据。 我想做的是定期从某个时间点（例如，点击开始按钮时）获取API，而不是从调用 useQuery 的时间开始。

我尝试了以下方式。

- 将enabled属性设置为false以禁用自动查询，但这也会禁用重新获取。
我找不到重新启用/设置enabled属性为true的方法。我不得不自己使用setTimeout 定期重新获取。 - 将enabled属性保持为true，但我找不到禁用初始获取的方法。

有没有合适的方法来处理这个问题？

- Ever

---

我记得在之前的版本中有 forceFetchOnMount 属性，但在第三个版本中被 refetchOnMount 取代了。 - Ever Dev

Answer 1

如果你将enabled选项硬编码为false，你仍然可以使用从useQuery返回的refetch方法来立即触发获取数据。但是，查询仍然会被禁用，因此不会进行后台更新。

如果您想要一个初始处于禁用状态，但在调用函数时启用的懒加载方式，最好的方法是使用带有本地状态的useQuery的简单抽象。

const useLazyQuery = (key, fn, options) => {
  const [enabled, setEnabled] = useState(false)
  return [() => setEnabled(true), useQuery(key, fn, { ...options, enabled })]
}

- TkDodo

---

有没有办法使用 queryClient 来实现类似的功能？ - Ever Dev

我认为您可以禁用查询并仍然执行 queryClient.refetchQueries(key) - 这类似于从 useQuery 返回的 refetch 方法。 - TkDodo

当调用“refetch method”时，有没有一种方法可以防止获取数据？ - Mykyta

Answer 2

import { useBoolean } from "@chakra-ui/react";
import { useQuery } from "@tanstack/react-query";

function useLazyQuery(queryKey, {queryFn, onError}) {
  const [Enable, setEnable] = useBoolean(false);

  const Get = useQuery(queryKey, {
    queryFn,
    onError: typeof onError === "function" && onError,
    enabled: Enable, // Habilitar la consulta solo si el filtro no está vacío
  });

  return { ...Get, enable: setEnable.on, disable: setEnable.off };
}

export default useLazyQuery;

- Genaro