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

加布里埃尔·蒂索(Gabriel Tiso)

我是我的应用,每当用户创建新相册时,发帖请求响应都会为我提供一个包含更新后的相册列表的列表,并且为了提供更好的用户体验,我希望用户在菜单中查看新内容。应用程序,而无需刷新页面。我知道SWR的mutate的存在,但是到目前为止,我无法使其工作。我试图在钩子中设置一个1000ms的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);

我很高兴收到一些反馈,谢谢您的时间:)

卢塞兹

您的代码几乎是正确的,问题出在以下事实: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
 */

docs: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, 
   }
);

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章