next.js - React Query 在 nextjs 中更改路由时重新获取数据

Question

我在我的 "next": "13.2.1", 项目中使用 @tanstack/react-query": "^4.26.0" 。我有在索引页上触发的查询。

GiveawayDetailsQuery-

export const useGiveawayDetails = () => useQuery(["giveawayDetails"], async () => {
    const response = await axios.get("/api/giveaway/giveaway-details")
    const data: giveawayDetails = await response.data;
    console.log(data);
    return data;
},
    {
        refetchOnWindowFocus: false,
        refetchOnMount: false,
        refetchInterval: 5 * 60 * 1000,
        onError: (error: any) => {
            if (error.response.status === 422 || error.response.status === 401) {
                toast(error.response.data.data.detail, { type: "error", toastId: "unauthorized" });
            } else {
                toast(error.response.data.data.detail, { type: "error" });
            }
        }
    },
);

我的index.tsx页面-

export default function Home() {

  return (
    <>
      <main className={styles.main}>
        <Giveaway />
        <BrandDiscounts />
        <YourRewards />
      </main>
    </>
  )
}

我的 Giveaway.tsx 组件 -

const Giveaway = () => {
    const { isLoading, isError, data, error } = useGiveawayDetails();
    return (
        <div className={styles.container}>
            <p className="text-600 text-md">Giveaways</p>
            <div className={styles["giveaway-container"]}>
                {
                    isLoading && !isError && <Skeleton
                        variant="rectangular"
                        width={210}
                        height={118}
                        className={styles["loading-skeleton"]} />
                }
                {
                    isError && !isLoading && <p className={`text-500 text-md ${styles["error-container"]}`}>{error?.response?.data?.data?.detail ?? "Something went wrong"}</p>
                }
                {
                    !isError && !isLoading && data?.giveaway &&
                    <Link href="/giveaway">
                        <Image src={data.giveaway[0].thumbnail_url} alt={data.giveaway[0].title} width={887} height={1183} priority={true} />
                    </Link>
                }
            </div>
        </div>
    )
}

export default Giveaway

现在的问题是，当我打开索引页面时，会获取查询，当我移动到其他一些路由并返回到索引页面时，会自动再次获取查询，我想禁用此功能。 我想在需要时重新获取查询。

Answer 1

来自 Tanstack Query => 在应用程序内部和实例引用(或在 React 状态)上创建一个新实例。这确保了数据不会在不同的用户和请求之间共享，同时每个组件仍然只创建一次 QueryClient lifecycle.QueryClient

const [queryClient] = React.useState(() => new QueryClient())

帮我解决了