在SWR中使用mutate重新验证数据-应该使用哪个？ 使用全局突变使用绑定突变指定刷新间隔

如何解决在SWR中使用mutate重新验证数据-应该使用哪个？ 使用全局突变使用绑定突变指定刷新间隔

在我的应用程序中，每当用户创建新相册时，发帖请求响应就会以更新的相册列表进行响应。

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

我知道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 internally hashes the keys used for queries/mutation上。因此，mutate函数使用的密钥根本没有在缓存中注册。

使用全局突变

要使用由mutate直接导出的swr函数来解决此问题，只需将相同的密钥传递给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
 */

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

指定刷新间隔

为完整性起见，正如您所说，另一个选择就是设置refreshInterval prop的值。在需要时强制进行重新提取：

const { data,error } = useSWR(
   ["/api/albums/list?id=",params),{
     refreshInterval: 1000,}
);

,

您可以按照以下步骤操作

const { data,mutate,error } = useSWR(
 ["/api/albums/list?id=",params)
);

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

此变异指向您的相册获取呼叫。 Swr自动重新获取您的数据。

,

您的用户界面在突变后没有刷新的原因是，传递给mutate()和useSWR()的第一个参数不匹配。

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

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