后台数据抓取指示器 | TanStack Query React 文档

查询的 status === 'pending' 状态足以显示查询的初始硬加载状态，但有时您可能希望显示一个额外的指示器，表明查询正在后台重新抓取数据。为此，查询还提供了 isFetching 布尔值，您可以用来显示它处于抓取状态，而不管 status 变量的状态如何。

tsx

function Todos() {
  const {
    status,
    data: todos,
    error,
    isFetching,
  } = useQuery({
    queryKey: ['todos'],
    queryFn: fetchTodos,
  })

  return status === 'pending' ? (
    <span>Loading...</span>
  ) : status === 'error' ? (
    <span>Error: {error.message}</span>
  ) : (
    <>
      {isFetching ? <div>Refreshing...</div> : null}

      <div>
        {todos.map((todo) => (
          <Todo todo={todo} />
        ))}
      </div>
    </>
  )
}

function Todos() {
  const {
    status,
    data: todos,
    error,
    isFetching,
  } = useQuery({
    queryKey: ['todos'],
    queryFn: fetchTodos,
  })

  return status === 'pending' ? (
    <span>Loading...</span>
  ) : status === 'error' ? (
    <span>Error: {error.message}</span>
  ) : (
    <>
      {isFetching ? <div>Refreshing...</div> : null}

      <div>
        {todos.map((todo) => (
          <Todo todo={todo} />
        ))}
      </div>
    </>
  )
}

显示全局后台数据抓取加载状态

除了单个查询的加载状态外，如果您希望在**任何**查询（包括后台查询）正在抓取数据时显示全局加载指示器，可以使用 useIsFetching 钩子。

tsx

import { useIsFetching } from '@tanstack/react-query'

function GlobalLoadingIndicator() {
  const isFetching = useIsFetching()

  return isFetching ? (
    <div>Queries are fetching in the background...</div>
  ) : null
}

import { useIsFetching } from '@tanstack/react-query'

function GlobalLoadingIndicator() {
  const isFetching = useIsFetching()

  return isFetching ? (
    <div>Queries are fetching in the background...</div>
  ) : null
}

后台获取指示器

显示全局后台数据抓取加载状态

想跳过文档吗？

想跳过文档吗？