Background Fetching Indicators

A query's status === 'loading' state is sufficient enough to show the initial hard-loading state for a query, but sometimes you may want to display an additional indicator that a query is refetching in the background. To do this, queries also supply you with an isFetching boolean that you can use to show that it's in a fetching state, regardless of the state of the status variable:

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

Displaying Global Background Fetching Loading State

In addition to individual query loading states, if you would like to show a global loading indicator when any queries are fetching (including in the background), you can use the useIsFetching hook:

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