useMutationState
TypeScript
1function useMutationState<TResult = MutationState<unknown, Error, unknown, unknown>, TMutation extends Mutation<any, any, any, any> = MutationTypeFromResult<TResult>>(options?: MutationStateOptions<TResult, TMutation>, queryClient?: QueryClient): TResult[];定义于:packages/svelte-query/src/useMutationState.svelte.ts:103
useMutationState 是一个函数,用于访问 MutationCache 中的所有修改。你可以传入 filters(MutationFilters)来筛选目标修改,并传入 select 来转换修改状态。
类型参数
TResult
TResult = MutationState<unknown, Error, unknown, unknown>
TMutation
TMutation extends Mutation<any, any, any, any> = MutationTypeFromResult<TResult>
参数
options?
MutationStateOptions<TResult, TMutation> = {}
用于筛选匹配修改的 filters,以及一个可选的 select,用于转换修改状态。
options 属性
| 属性 | 类型 | 描述 |
|---|---|---|
filters? |
MutationFilters |
用于选择需返回其状态的修改的筛选器。 |
select? |
(mutation: TMutation) => TResult |
将每个匹配的修改映射为其返回值。默认返回修改的 state。 |
queryClient?
使用此参数可指定自定义的 QueryClient;否则将使用最近上下文中的 QueryClient。
返回值
TResult[]
一个数组,包含对每个匹配修改应用 select 后所得的结果。
示例
获取所有正在运行的修改的 variables:
svelte
1<script lang="ts">2 import { useMutationState } from '@tanstack/svelte-query'3 4 const pendingVariables = useMutationState({5 filters: { status: 'pending' },6 select: (mutation) => mutation.state.variables,7 })8</script>9 10{pendingVariables.length} posts saving...通过 mutationKey 获取特定修改的所有 data:
svelte
1<script lang="ts">2 import { createMutation, useMutationState } from '@tanstack/svelte-query'3 4 const mutationKey = ['posts']5 6 // Some mutation that we want to get the state for7 const mutation = createMutation(() => ({8 mutationKey,9 mutationFn: createPosts,10 }))11 12 const savedPosts = useMutationState({13 // this mutation key needs to match the mutation key of the given mutation (see above)14 filters: { mutationKey, status: 'success' },15 select: (mutation) => mutation.state.data,16 })17</script>18 19<button onclick={() => mutation.mutate(['New Post'])}>20 Create post ({savedPosts.length} saved so far)21</button>通过 mutationKey 访问最新一次修改的 data。每次调用 mutate 都会在修改缓存中新增一项,持续 gcTime 毫秒 —— 查看 useMutationState 返回数组的最后一项,即可获得最新的成功修改(上述 status: 'success' 筛选器已排除等待中/出错的修改):
svelte
1<script lang="ts">2 import { useMutationState } from '@tanstack/svelte-query'3 4 const savedPosts = useMutationState({5 filters: { mutationKey: ['posts'], status: 'success' },6 select: (mutation) => mutation.state.data,7 })8 9 const latestSavedPost = $derived(savedPosts[savedPosts.length - 1])10</script>11 12{latestSavedPost ? 'Saved' : 'Nothing saved yet'}