1.8 KiB
id, title
| id | title |
|---|---|
| useMutationState | useMutationState |
function useMutationState<TResult>(
host,
options,
queryClient?): MutationStateAccessor<TResult>;
Defined in: packages/lit-query/src/useMutationState.ts:192
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?
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>`
}
}