加载状态指示器 background-fetching-indicators

React 查看英文原文 ↗

查询的status === 'loading'状态足以显示查询的初始硬加载状态，但是有时您可能想显示一个额外的指示符，表明该查询正在后台重新获取数据。为此，还为您提供了一个isFetching的布尔值，无论status变量的状态如何，您都可以使用它来表示数据正在获取中：

JavaScript

1function Todos() {2  const {3    status,4    data: todos,5    error,6    isFetching,7  } = useQuery("todos", fetchTodos);8 9  return status === "loading" ? (10    <span>Loading...</span>11  ) : status === "error" ? (12    <span>Error: {error.message}</span>13  ) : (14    <>15      {isFetching ? <div>Refreshing...</div> : null}1617      <div>18        {todos.map((todo) => (19          <Todo todo={todo} />20        ))}21      </div>22    </>23  );24}

显示全局后台加载的状态

除了单个查询的加载状态外，如果要在任何查询正在获取数据时（包括在后台）显示一个全局的加载指示器，你可以使用useIsFetchingHook：

JavaScript

1import { useIsFetching } from "react-query";2 3function GlobalLoadingIndicator() {4  const isFetching = useIsFetching();5 6  return isFetching ? (7    <div>Queries are fetching in the background...</div>8  ) : null;9}