A query's status === 'pending'
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:
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></>)}
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></>)}
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:
tsx
import { useIsFetching } from '@tanstack/react-query'function GlobalLoadingIndicator() {const isFetching = useIsFetching()return isFetching ? (<div>Queries are fetching in the background...</div>) : null}
tsx
import { useIsFetching } from '@tanstack/react-query'function GlobalLoadingIndicator() {const isFetching = useIsFetching()return isFetching ? (<div>Queries are fetching in the background...</div>) : null}
“This course is the best way to learn how to use React Query in real-world applications.”—Tanner LinsleyCheck it out