useMutationState
TypeScript
1function useMutationState<TResult = MutationState<unknown, unknown, unknown, unknown>>(2 host: ReactiveControllerHost,3 options?: MutationStateOptions<TResult>,4 queryClient?: QueryClient5): MutationStateAccessor<TResult>;定义位置:packages/lit-query/src/useMutationState.ts:186
创建一个 Lit 响应式控制器,用于从修改缓存(mutation cache)中匹配的修改(mutations)中选取状态。
当 options.filters 是一个函数时,它会在宿主(host)更新期间被重新读取,从而使选取逻辑能够响应宿主的响应式状态。若省略 queryClient,该控制器将从最近已连接的 QueryClientProvider 中解析出查询客户端(QueryClient)。
类型参数
TResult
TResult = MutationState<unknown, unknown, unknown, unknown>
参数
host
ReactiveControllerHost
拥有该修改缓存订阅(mutation cache subscription)的 Lit 响应式控制器宿主。
options?
MutationStateOptions<TResult> = {}
修改状态筛选器及可选的选择器(selector)。
options 属性
| 属性 | 类型 | 描述 |
|---|---|---|
filters? |
Accessor<MutationFilters> |
用于从修改缓存中筛选匹配修改的过滤器。 |
select? |
(mutation: Mutation) => TResult |
将每个匹配的修改映射为访问器(accessor)所返回的值。 |
queryClient?
可选的显式查询客户端。若控制器不应从 Lit 上下文(Lit context)中解析查询客户端,请提供此参数。
返回值
MutationStateAccessor<TResult>
所选修改状态数组的访问器。
示例
TypeScript
1import { LitElement, html } from 'lit'2import { useMutationState } from '@tanstack/lit-query'3 4class PendingUploads extends LitElement {5 private readonly uploads = useMutationState(this, {6 filters: { mutationKey: ['upload'], status: 'pending' },7 select: (mutation) => mutation.state.variables as File,8 })9 10 render() {11 return html`<span>${this.uploads().length} uploads pending</span>`12 }13}