useIsFetching

function useIsFetching(filters?, queryClient?): number;

Defined in: preact-query/src/useIsFetching.ts:42

useIsFetching is an optional hook that 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.

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/preact-query'

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

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

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

function GlobalLoadingIndicator() {
  const isFetching = useIsFetching()

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