useIsFetching

function useIsFetching(filters?: Omit<QueryFilters<readonly unknown[]>, "fetchStatus">, 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?#

Omit<QueryFilters<readonly unknown[]>, "fetchStatus">

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

filters properties#

Built from QueryFilters. See the type above for what it changes.

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#

<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:

<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}