后台拉取指示器
查询的 status === 'pending' 状态足以显示查询的初始硬加载状态，但有时你可能希望额外显示一个指示器，表明某个查询正在后台重新拉取。为此，查询还提供了一个 isFetching 布尔值，你可以用它来表明查询正处于拉取状态，而无需关心 status 变量的实际状态：
TypeScript
1function Todos() {2 const {3 status,4 data: todos,5 error,6 isFetching,7 } = useQuery({8 queryKey: ['todos'],9 queryFn: fetchTodos,10 })11 12 return status === 'pending' ? (13 <span>Loading...</span>14 ) : status === 'error' ? (15 <span>Error: {error.message}</span>16 ) : (17 <>18 {isFetching ? <div>Refreshing...</div> : null}1920 <div>21 {todos.map((todo) => (22 <Todo todo={todo} />23 ))}24 </div>25 </>26 )27}显示全局后台拉取加载状态
除了单个查询的加载状态外，如果你希望在任意查询（包括后台拉取）处于拉取状态时显示一个全局加载指示器，则可以使用 useIsFetching Hook：
TypeScript
1import { useIsFetching } from '@tanstack/react-query'2 3function GlobalLoadingIndicator() {4 const isFetching = useIsFetching()5 6 return isFetching ? (7 <div>Queries are fetching in the background...</div>8 ) : null9}