useMutationState

function useMutationState<TResult = MutationState<unknown, unknown, unknown, unknown>>(
   host: ReactiveControllerHost,
   options?: MutationStateOptions<TResult>,
   queryClient?: QueryClient
): MutationStateAccessor<TResult>;

Defined in: packages/lit-query/src/useMutationState.ts:186

Creates a Lit reactive controller that selects state from matching mutations in the mutation cache.

When options.filters is a function, it is re-read during host updates so the selection can follow reactive host state. If queryClient is omitted, the controller resolves the client from the nearest connected QueryClientProvider.

Type Parameters

TResult

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

Parameters

host

ReactiveControllerHost

The Lit reactive controller host that owns the mutation cache subscription.

options?

MutationStateOptions<TResult> = {}

Mutation state filters and optional selector.

options properties

Property	Type	Description
filters?	Accessor<MutationFilters>	Filters used to select mutations from the mutation cache.
select?	(mutation: Mutation) => TResult	Maps each matching mutation to the value returned by the accessor.

queryClient?

QueryClient

Optional explicit query client. Provide this for controllers that should not resolve a client from Lit context.

Returns

MutationStateAccessor<TResult>

An accessor for the selected mutation state array.

Example

import { LitElement, html } from 'lit'
import { useMutationState } from '@tanstack/lit-query'

class PendingUploads extends LitElement {
  private readonly uploads = useMutationState(this, {
    filters: { mutationKey: ['upload'], status: 'pending' },
    select: (mutation) => mutation.state.variables as File,
  })

  render() {
    return html`<span>${this.uploads().length} uploads pending</span>`
  }
}