# useMutationState

```ts
function useMutationState<TResult>(
   host: ReactiveControllerHost,
   options?: MutationStateOptions<TResult>,
queryClient?: QueryClient): MutationStateAccessor<TResult>;
```

Defined in: [packages/lit-query/src/useMutationState.ts:186](https://github.com/TanStack/query/blob/main/packages/lit-query/src/useMutationState.ts#L186)

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`](../interfaces/MutationState.md)\<`unknown`, `unknown`, `unknown`, `unknown`\>

## Parameters

### host

`ReactiveControllerHost`

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

### options?

[`MutationStateOptions`](../type-aliases/MutationStateOptions.md)\<`TResult`\> = `{}`

Mutation state filters and optional selector.

<a id="options-properties"></a>

#### `options` properties

| Property | Type | Description |
| ------ | ------ | ------ |
| <a id="options-property-filters"></a> `filters?` | [`Accessor`](../type-aliases/Accessor.md)\<[`MutationFilters`](../interfaces/MutationFilters.md)\> | Filters used to select mutations from the mutation cache. |
| <a id="options-property-select"></a> `select?` | (`mutation`: [`Mutation`](../classes/Mutation.md)) => `TResult` | Maps each matching mutation to the value returned by the accessor. |

### queryClient?

[`QueryClient`](../classes/QueryClient.md)

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

## Returns

[`MutationStateAccessor`](../type-aliases/MutationStateAccessor.md)\<`TResult`\>

An accessor for the selected mutation state array.

## Example

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