8

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

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

我知道 SWR 变异的存在，但到目前为止，我无法让它工作。

我试图refreshInterval在我的钩子中设置一个 1000 毫秒，但我想知道如何通过使用 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);

我很乐意得到一些反馈。

4

3 回答 3

23

您的代码几乎是正确的，问题在于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, 
   }
);
于 2020-10-07T17:10:14.590 回答
0

您的 UI 在 mutate 后不刷新的原因是因为第一个参数传递给mutate()anduseSWR()彼此不匹配。

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

mutate("/api/albums/list?id=", data.newAlbums, false);
于 2020-10-11T07:24:16.753 回答
0

你可以这样做

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

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

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

于 2020-10-07T16:53:43.140 回答