即使密钥缓存在 Next.js 中，也会导致 useSWR 在页面装载时重新获取

问题描述

所以我使用 useSWR 钩子从我的 api 端点获取数据。我知道它使用 api 路由作为缓存数据的键。

问题是，我在 2 个页面上使用 api 路由（我们称它们为 Page1 和 Page2），只是具有不同的查询。因此，每当我首先访问 Page1 时，如果我再导航到第 2 页，它就会显示第 1 页的缓存版本，反之亦然。

我尝试在两个页面上使用 mutate 函数，它所做的只是在重新验证之前首先显示缓存版本。这并不理想。我想要的是页面装载，应该显示正确的数据。

我还尝试在 _app.js 的 SWRConfig 选项中将 revalidateOnMount 标志设置为 true，如下所示：

...
   <SWRConfig value={{ revalidateOnMount: true}}>
      ...
    </SWRConfig>
...

不起作用。

我应该提一下，我确实在两个页面上都有来自 getStaticProps 函数的 initialData。

希望得到任何帮助。被困在这个问题上很长一段时间了。

解决方法

正如@juliomalves 上面指出的，您可以将 multiple arguments 传递给钩子，它们都成为缓存数据的键。