Function: useMutationState()

function useMutationState<TResult>(
   host,
   options,
queryClient?): MutationStateAccessor<TResult>;

function useMutationState<TResult>(
   host,
   options,
queryClient?): MutationStateAccessor<TResult>;

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

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.

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>`
  }
}

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>`
  }
}

useMutationState

Function: useMutationState()#

Type Parameters#

TResult#

Parameters#

host#

options#

queryClient?#

Returns#

Example#

Want to Skip the Docs?