useIsMutating

function useIsMutating(filters?: UseIsMutatingFilters, queryClient?: QueryClient): Ref<number>;

function useIsMutating(filters?: UseIsMutatingFilters, queryClient?: QueryClient): Ref<number>;

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

The useIsMutating composable returns a ref to the number of mutations that your application currently has pending (useful for app-wide loading indicators).

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

Parameters

filters?

UseIsMutatingFilters = {}

The MutationFilters to narrow down the matched mutations.

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 mutations that your application currently has pending.

Example

vue

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

// How many mutations matching the posts prefix are in progress?
const isMutatingPosts = useIsMutating({ mutationKey: ['posts'] })
</script>

<template>
  <span v-if="isMutatingPosts">Saving posts...</span>
</template>

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

// How many mutations matching the posts prefix are in progress?
const isMutatingPosts = useIsMutating({ mutationKey: ['posts'] })
</script>

<template>
  <span v-if="isMutatingPosts">Saving posts...</span>
</template>

Parameters

filters?

queryClient?

Returns

Example

Want to Skip the Docs?