如何在提取之间从 useSWR 导出“加载”而无需重新验证？

Question

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

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

他们的文档让它看起来很简单：

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

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

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

还返回了一个附加项目isValidating。所以我更新了我的逻辑：

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

然而，在以下情况下这可能是正确的：

正在加载请求或重新验证。

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

那么如何在 URL 更改之间获得“加载”而不需要重新验证呢？我正在尝试复制 graphQL Apollo 客户端返回的方式const { loading, error, data } = useQuery(GET_DOGS);

Answer 1

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

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

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

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

Answer 2

或者，您可以通过使用中间件来获取加载。这是我用的...

loadingMiddleware.ts

import { useState } from 'react'
import { Middleware } from 'swr'

const loadingMiddleware: Middleware = (useSWRNext) => (key, fetcher, config) => {
  const [loading, setLoading] = useState(false)

  const extendedFetcher = (...args) => {
    setLoading(true)
    try {
      return fetcher(...args)
    } finally {
      setLoading(false)
    }
  }

  const swr = useSWRNext(key, extendedFetcher, config)

  return { ...swr, loading }
}

export default loadingMiddleware

App.tsx

import { SWRConfig } from 'swr'
import loadingMiddleware from './loadingMiddleware'

const App: FC = () => {
  ...

  return (
    <SWRConfig value={{ use: [loadingMiddleware] }}>
      ...
    </SWRConfig>
  )
}

export default App

更新（12/13/22）

swr@v2是 out 并在 的返回值中提供isLoading和属性。isValidatinguseSWR

swr 根据文档，这是两者之间的区别。

• isValidating每当有正在进行的请求时，无论数据是否加载，都会变为 true。
• isLoading当有正在进行的请求并且数据尚未加载时变为 true。