useMutationState

function useMutationState<TResult = MutationState<unknown, Error, unknown, unknown>, TMutation extends Mutation<any, any, any, any> = MutationTypeFromResult<TResult>>(options?: MutationStateOptions<TResult, TMutation>, queryClient?: QueryClient): TResult[];

Defined in: packages/svelte-query/src/useMutationState.svelte.ts:103

useMutationState is a function that gives you access to all mutations in the MutationCache. You can pass filters (MutationFilters) to narrow down your mutations, and select to transform the mutation state.

Type Parameters

TResult

TResult = MutationState<unknown, Error, unknown, unknown>

TMutation

TMutation extends Mutation<any, any, any, any> = MutationTypeFromResult<TResult>

Parameters

options?

MutationStateOptions<TResult, TMutation> = {}

The filters to narrow down matched mutations, and an optional select to transform the mutation state.

options properties

Property	Type	Description
filters?	MutationFilters	The filters that select the mutations to return the state of.
select?	(mutation: TMutation) => TResult	Maps each matching mutation to the value returned for it. Defaults to the mutation's state.

queryClient?

QueryClient

Use this to use a custom QueryClient. Otherwise, the one from the nearest context will be used.

Returns

TResult[]

An Array of whatever select returns for each matching mutation.

Examples

Get all variables of all running mutations:

svelte

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

  const pendingVariables = useMutationState({
    filters: { status: 'pending' },
    select: (mutation) => mutation.state.variables,
  })
</script>

{pendingVariables.length} posts saving...

Get all data for specific mutations via the mutationKey:

svelte

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

  const mutationKey = ['posts']

  // Some mutation that we want to get the state for
  const mutation = createMutation(() => ({
    mutationKey,
    mutationFn: createPosts,
  }))

  const savedPosts = useMutationState({
    // this mutation key needs to match the mutation key of the given mutation (see above)
    filters: { mutationKey, status: 'success' },
    select: (mutation) => mutation.state.data,
  })
</script>

<button onclick={() => mutation.mutate(['New Post'])}>
  Create post ({savedPosts.length} saved so far)
</button>

Access the latest mutation data via the mutationKey. Each invocation of mutate adds a new entry to the mutation cache for gcTime milliseconds — check the last item that useMutationState returns to get the latest successful mutation (the status: 'success' filter above excludes pending/errored ones):

svelte

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

  const savedPosts = useMutationState({
    filters: { mutationKey: ['posts'], status: 'success' },
    select: (mutation) => mutation.state.data,
  })

  const latestSavedPost = $derived(savedPosts[savedPosts.length - 1])
</script>

{latestSavedPost ? 'Saved' : 'Nothing saved yet'}