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

【问题标题】：react-query refetches data on page change in nextjsreact-query 在 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 我通过为每个页面创建一个查询客户端得到了另一个解决方案
不，它的行为又奇怪了，我会找到一个合适的解决方案然后发布答案
有什么解决办法吗？

标签： reactjs next.js react-query

【解决方案1】：

简单的解决方法是：

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

【讨论】：