react-query 在 nextjs 中重新获取页面更改的数据

Posted 2023-03-30

【中文标题】react-query 在 nextjs 中重新获取页面更改的数据

【英文标题】：react-query refetches data on page change in nextjs

【发布时间】：2021-07-06 19:43:39

【问题描述】：

我正在开发一个名为 goloop 的项目，该项目在 vercel 上使用无服务器后端托管。

前端 ( nextjs ) 使用 react-query 挂钩来获取数据。因为它是一个电子商务网站，所以我在我的登录页面上获取所有产品，并在它获取数据时显示一个骨架组件。 这里的问题是每次更改页面时都会重新获取数据，这有点麻烦。

我是这样创建客户端的：

const queryClient = new QueryClient(
    defaultOptions: 
      queries: 
        retry: false,
        staleTime: 60 * 1000 * 5,
        onError: (e) => 
          if ("message" in (e as Error)) 
            console.log((e as Error).message);
          
        ,
      ,
    ,
  );

如果您需要更多代码，请通知我或查看 repo：https://github.com/lorstenoplo/eccom-next

应用托管在这里：https://goloop.vercel.app

【问题讨论】：

你有问题，我明白你在说什么，但你能展示一个代码示例来说明我将如何检查和防止 api 调用

nvm 我通过为每个页面创建一个查询客户端得到了另一个解决方案

不，它的行为又奇怪了，我会找到一个合适的解决方案然后发布答案

有什么解决办法吗？

【参考方案1】：

简单的解决方法是：

添加过时的时间 创建一个新的 queryCache 并在客户端选项中提供它 最重要的是重启你的服务器和IDE