使用SWR中的mutate重新验证数据 - 我应该使用哪一个？

Question

我的应用程序中，每当用户创建新相册时，POST请求的响应会返回更新后的相册列表。

为了提供更好的用户体验，我希望用户在不刷新页面的情况下就可以在应用程序中查看新内容。

我知道SWR的mutate存在，但到目前为止，我还不能使其工作。

我尝试在我的hook中设置1000毫秒的refreshInterval，但我想知道如何使用mutate实现这一点。以下是我尝试过的方法：

SWR hook

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);

我很乐意得到一些反馈。

- gabriel_tiso

Answer 1

你的代码几乎正确，问题在于 SWR 的关键字 内部进行查询/变异时使用哈希。因此，mutate 函数使用的关键字没有注册在缓存中。

使用全局 mutate

要解决这个问题，只需要将相同的关键字传递给 useSWR 和 mutate，即可使用直接由 swr 导出的 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, 
   }
);

- lucagez

---

完美的答案，满足了我的所有需求 :) 。还有一件事，您可以看到我的抓取器有（url，params）作为参数。我想像这样传递一个参数（...args），但我得到了一个typescript错误。您不需要回答，我已经点赞并接受了答案，但我想知道，因为我已经提出了这个问题，但是我没有得到回复。 - gabriel_tiso

Answer 2

您的界面没有在变异后进行刷新的原因是由于传递到mutate()和useSWR()的第一个参数不匹配。

第一个参数实际上是一个唯一的键，SWR使用它来将钩子与突变关联起来。更新您的突变调用以使用与钩子相同的键，这样可以解决您的问题。

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

- Ro Milton

Answer 3

你可以按照以下步骤进行

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

要重新加载swr缓存，只需调用mutate();。

这个mutate是指您的专辑获取调用。Swr会自动重新获取您的数据。

- dna

---

revalidate() 是刷新数据的规范调用。 - AKX

我在swr（https://github.com/vercel/swr#manually-revalidate）中没有看到任何`revalidate()`函数。 - dna

这显然是没有记录的，但它确实存在。https://github.com/vercel/swr/blob/651c368833164945a8ee5708eb3dd6091241f05b/src/types.ts#L80 - AKX