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

Question

在我的应用程序中，每次用户创建新专辑时，发布请求响应都会以更新的专辑列表列表进行响应。

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

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

我试图refreshInterval在我的钩子中设置一个 1000 毫秒，但我想知道如何通过使用 mutate 来做到这一点。这是我尝试过的：

驻波钩

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

您的代码几乎是正确的，问题在于SWR 内部散列用于查询/变异的键。因此，mutate函数使用的密钥根本没有在缓存中注册。

使用全局变异

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

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

这将使散列键的缓存无效。从原始钩子中检索到的数据将变得陈旧，因此将再次被获取。

使用绑定突变

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

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

指定刷新间隔

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

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
 */