查询状态指示器

查询状态为 pending

查询的状态为 pending 时，足以显示查询的初始加载状态，但有时您可能希望显示一个额外的指示器，表示查询正在后台重新获取数据。为了实现这一点，查询还会提供一个 isFetching 布尔值，您可以用它来显示查询处于获取状态，无论查询的 status 变量的状态如何：

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 钩子：

import { useIsFetching } from "@tanstack/react-query";

function GlobalLoadingIndicator() {
  const isFetching = useIsFetching();

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

这样，您可以显示一个全局的后台加载指示器，当任何查询正在进行时，都会触发该指示器的显示。