useIsMutating

function useIsMutating(filters?: MutationFilters<unknown, Error, unknown, unknown>, queryClient?: QueryClient): number;

Defined in: packages/react-query/src/useMutationState.ts:33

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

Parameters

filters?

MutationFilters<unknown, Error, unknown, unknown>

The MutationFilters to narrow down the matched mutations.

`filters` properties

Property	Type	Description
`exact?`	`boolean`	Match mutation key exactly
`mutationKey?`	readonly `unknown`[]	Include mutations matching this mutation key
`predicate?`	(`mutation`: `Mutation`<`TData`, `TError`, `TVariables`, `TOnMutateResult`>) => `boolean`	Include mutations matching this predicate function
`status?`	`"error"` \| `"pending"` \| `"success"` \| `"idle"`	Filter by mutation status

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

Example

import { useIsMutating } from '@tanstack/react-query'

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

  return isMutatingPosts ? <span>Saving posts...</span> : null
}