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

Question

在我的应用程序中，每次用户创建新专辑时，发布请求响应都会以更新的专辑列表列表进行响应。
为了提供更好的用户体验，我希望用户无需刷新页面即可看到应用中的新内容。
我知道 SWR 变异的存在，但到目前为止，我无法让它工作。
我试图设置一个 1000 毫秒 refreshInterval在我的钩子(Hook)里，但我想知道如何通过使用 mutate 来做到这一点。这是我尝试过的:
SWR Hook

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 internally hashes the keys used for queries/mutation .因此，mutate 使用的 key 函数根本没有在缓存中注册。
使用全局变异
要解决此问题，请使用 mutate swr直接导出的函数, 只需将相同的 key 传递给 useSWR和 mutate .

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

这将使散列键的缓存无效。从原始钩子(Hook)中检索到的数据将过时，因此将被再次获取。
使用绑定(bind)变异
另一种选择是利用 mutate函数绑定(bind)到 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
指定刷新间隔
正如您所说，为了完整起见，另一种选择是设置 refreshInterval 的值。支柱。在需要时强制重新获取:

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