reactjs - 如何在不重新验证的情况下从提取之间的 useSWR 派生“加载”？

Question

我被问到一个关于 SWR“加载”状态的问题：

如何在不同的 URL 获取之间从 SWR 创建加载状态？

他们的文档使它看起来直截了当：

  const { data, error } = useSWR(`/api/user/${id}`, fetcher)
  const isLoading = !error && !data;

然而，这个逻辑在第一次渲染钩子/组件后似乎失败了。在第一个渲染数据是undefined. 然后加载，数据成为 UI 中消耗的值。

假设我id通过 UI 更改并希望显示加载指示器。因为datais no longer undefined，所以同样的逻辑失败了。

有一个额外的项目返回isValidating。所以我更新了我的逻辑：

const isLoading = (!data && !error) || isValidating

但是，在以下情况下可能会出现这种情况：

有请求或重新验证加载。

所以理论上其他东西会导致我的组件重新渲染。这可能会无意中导致“重新验证”并显示触发加载状态。这可能会意外地暂时破坏 UI。

那么如何在不重新验证的情况下在 URL 更改之间推导出“加载”？我正在尝试复制 graphQL Apollo Client 如何返回const { loading, error, data } = useQuery(GET_DOGS);

score 3 · Accepted Answer

假设我id通过 UI 更改并希望显示加载指示器。因为datais no longer undefined，所以同样的逻辑失败了。

dataundefined当您更改键 ( id) 时，如果它没有缓存值，它将再次出现。

请记住，在 SWR{ data } = useSWR(key)中，在心理上等同于v = getCache(k)，其中 fetcher（验证）只是写入缓存并触发重新渲染。

data默认为undefined,isValidating表示是否有正在进行的请求。

1 回答 1