在 SWR 中使用 mutate 重新验证数据——我应该使用哪个？

Question

在我的应用中，每次用户创建新相册时，post 请求响应都会以更新后的相册列表作为响应。

为了提供更好的用户体验，我希望用户无需刷新页面即可看到应用中的新内容。

我知道 SWR 的变异的存在，但到目前为止，我无法让它发挥作用。

我试图在我的钩子中设置 1000 毫秒 refreshInterval，但我想知道如何使用 mutate 来实现它。这是我尝试过的：

SWR挂钩

const fetcher = async (url: string, param: string) => {
    const res = await fetch(url + param);
    
   return res.json();
};


const { data, error } = useSWR(
 ["/api/albums/list?id=", appUser.id],
  (url, params) => fetcher(url, params)
);

createAlbum 函数内部：

const data = await response.json();

mutate("/api/albums/list", data.newAlbums, false);

我很乐意得到一些反馈。

Answer 1

您可以按照以下步骤进行

const { data, mutate, error } = useSWR(
 ["/api/albums/list?id=", appUser.id],
  (url, params) => fetcher(url, params)
);

重新加载 swr 缓存只需调用 mutate(); .

这个 mutate 是指你的相册获取调用。 Swr 自动重新获取您的数据。

Answer 2

您的代码几乎是正确的，问题在于SWR internally hashes the keys used for queries/mutation。因此，mutate函数使用的key根本就没有注册到缓存中。

使用全局变异

要使用swr直接导出的mutate函数来解决这个问题，只需将相同的密钥传递给useSWR和mutate即可。

mutate(["/api/albums/list?id=", appUser.id]);

这将使散列键的缓存失效。从您的原始挂钩中检索到的数据将会过时，因此将被再次提取。

使用绑定变异

另一种选择是利用绑定到 swr 密钥的 mutate 函数。

const { data, error, mutate } = useSWR(
   ["/api/albums/list?id=", appUser.id],
   (url, params) => fetcher(url, params)
);

/*
 * Now you can just call `mutate()` without specifying `key` argument
 */

文档：https://github.com/vercel/swr#bound-mutate

指定刷新间隔

为了完整起见，正如您所说，另一种选择是设置 refreshInterval 属性的值。需要时强制重新获取：

const { data, error } = useSWR(
   ["/api/albums/list?id=", appUser.id],
   (url, params) => fetcher(url, params),
   {
     refreshInterval: 1000, 
   }
);

Answer 3

你的 UI 在 mutate 后没有刷新的原因是传递给 mutate() 和 useSWR() 的第一个参数不匹配。

第一个参数本质上是一个唯一键，SWR 使用它来将挂钩与变异相关联。更新您的 mutate 调用以使用与挂钩相同的键，它应该可以解决您的问题。

mutate("/api/albums/list?id=", data.newAlbums, false);

在 SWR 中使用 mutate 重新验证数据——我应该使用哪个？

Revalidating data using mutate in SWR - Which should I use?

javascript

typescript

reactjs

next.js

swr

使用全局变异

使用绑定变异

指定刷新间隔