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

IT技术 javascript reactjs typescript next.js swr
2021-05-14 00:29:08

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

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

我知道 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);

我很乐意得到一些反馈。

3个回答

您的代码几乎是正确的，问题在于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 } = useSWR(
   ["/api/albums/list?id=", appUser.id],
   (url, params) => fetcher(url, params),
   {
     refreshInterval: 1000, 
   }
);

你可以做如下

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

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

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

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

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

mutate("/api/albums/list?id=", data.newAlbums, false);
其它你可能感兴趣的问题
上一篇Flashforge Adventurer 3 上的 ABS 打印温度 下一篇什么是一本关于 3D 打印机的好书？