useIsFetching

function useIsFetching(filters?: QueryFilters<readonly unknown[]>, queryClient?: QueryClient): number;

Defined in: packages/react-query/src/useIsFetching.ts:41

The useIsFetching hook returns the number of the queries that your application is loading or fetching in the background (useful for app-wide loading indicators).

Parameters

filters?

QueryFilters<readonly unknown[]>

The QueryFilters to narrow down the matched queries.

`filters` properties

Property	Type	Default value	Description
`exact?`	`boolean`	`undefined`	Match query key exactly
`fetchStatus?`	`"fetching"` \| `"paused"` \| `"idle"`	`undefined`	Include queries matching their fetchStatus
`predicate?`	(`query`: `Query`) => `boolean`	`undefined`	Include queries matching this predicate function
`queryKey?`	`TQueryKey` \| `TuplePrefixes`<`TQueryKey`>	`undefined`	Include queries matching this query key
`stale?`	`boolean`	`undefined`	Include or exclude stale queries
`type?`	`QueryTypeFilter`	`'all'`	Filter to active queries, inactive queries or all queries

queryClient?

QueryClient

Use this to use a custom QueryClient. Otherwise, the one from the nearest context will be used.

Returns

number

Will be the number of the queries that your application is currently loading or fetching in the background.

Examples

import { useIsFetching } from '@tanstack/react-query'

function PostsFetchingIndicator() {
  // How many queries matching the posts prefix are fetching?
  const isFetchingPosts = useIsFetching({ queryKey: ['posts'] })

  return isFetchingPosts ? <span>Refreshing posts...</span> : null
}

A global loading indicator for any query fetching in the background, not just the ones on screen:

import { useIsFetching } from '@tanstack/react-query'

function GlobalLoadingIndicator() {
  const isFetching = useIsFetching()

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