useIsFetching

function useIsFetching(fetchingFilters?: UseIsFetchingFilters, queryClient?: QueryClient): Ref<number>;

Defined in: packages/vue-query/src/useIsFetching.ts:55

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

fetchingFilters may be a plain object, MaybeRefDeep, or a reactive getter (() => ({ ... })) — pass a getter if the filters themselves depend on other reactive state.

Parameters#

fetchingFilters?#

UseIsFetchingFilters = {}

The QueryFilters to narrow down the matched queries.

queryClient?#

QueryClient

Use this to use a custom QueryClient. Otherwise, the one provided by VueQueryPlugin will be used.

Returns#

Ref<number>

A ref to the number of the queries that your application is currently loading or fetching in the background.

Examples#

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

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

<template>
  <span v-if="isFetchingPosts">Refreshing posts...</span>
</template>

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

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

const isFetching = useIsFetching()
</script>

<template>
  <div v-if="isFetching">Queries are fetching in the background...</div>
</template>