如何在不重新验证的情况下从提取之间的 useSWR 派生 "loading"？

Question

有人问我有关 SWR“加载”状态的问题：

How do you create a loading state from SWR between different URL fetches?

Their docs 让它看起来很直接：

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

然而，这个逻辑似乎在 hook/component 的第一次渲染后失败了。第一个渲染数据是 undefined。然后加载和数据成为在 UI.

中使用的值

假设我通过 UI 更改 id 并希望显示加载指示器。因为 data 不再是 undefined，同样的逻辑失败了。

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

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

然而，这可能在以下情况下成立：

there's a request or revalidation loading.

所以理论上是其他原因导致我的组件重新呈现。这可能会无意中导致“重新验证”并显示触发器加载状态。这可能会意外地暂时中断 UI。

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

Answer 1

Let's say I change the id via the UI and want to show loading indicator. Because data is no longer undefined, the same logic fails.

data 将在您更改密钥 (id) 时再次变为 undefined，如果它没有缓存值。

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

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

How to derive "loading" from useSWR between fetches without revalidation?