循环中的GET请求

Question

我有一个 Nextjs 和 ts 应用程序，它发出一个请求，从集成中调用 webhook，该集成返回 json 数组中的 Google 工作表，我注意到它在循环中连续向我的集成发出请求。

我的代码：

import { useQuery, UseQueryResult } from "@tanstack/react-query";

const useFetchData = <T>(url: string, queryKey: string): UseQueryResult<T> => {
  return useQuery<T>({
    queryKey: [queryKey],
    queryFn: async () => {
      console.log(`Fetching data from: ${url}`);
      const response = await fetch(url);
      if (!response.ok) {
        throw new Error(`Network response was not ok: ${response.statusText}`);
      }
      const data = await response.json();
      console.log("Data fetched:", data);
      return data;
    },
  });
};

export default useFetchData;

我放了日志，页面没有再次重新渲染，只有请求一次又一次发生。我无法确定原因。

Answer 1

您应该使用 useQuery 中的 staleTime 和 cacheTime 选项来控制请求的频率。 staleTime 指定数据被视为新鲜的时间，cacheTime 定义非活动数据在缓存中保留的时间。将 staleTime 设置为较高的值将阻止连续重新获取数据。然而useQuery的主要目的是根据需要不断地获取数据。如果您只想在单击按钮时或仅在第一次渲染时获取数据，则无需使用 useQuery。

https://tanstack.com/query/v4/docs/framework/react/reference/useQuery