useIsFetching

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

Defined in: packages/svelte-query/src/useIsFetching.svelte.ts:40

The useIsFetching function 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[]>

QueryFilters to narrow down which queries to count. Omit to count every fetching query.

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

ReactiveValue<number>

A reactive value — read .current to get how many matching queries are currently fetching.

Examples

svelte

<script lang="ts">
  import { useIsFetching } from '@tanstack/svelte-query'

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

{#if isFetchingPosts.current}
  <span>Refreshing posts...</span>
{/if}

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

svelte

<script lang="ts">
  import { useIsFetching } from '@tanstack/svelte-query'

  const isFetching = useIsFetching()
</script>

{#if isFetching.current}
  <div>Queries are fetching in the background...</div>
{/if}