译零 TransZero · TanStack Query 中文文档
主站

useMutationState

更新于 2026-11-02 React 查看英文原文 ↗
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/react-query/src/useMutationState.ts:183

useMutationState 是一个 Hook,用于访问 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,用于转换修改状态。

queryClient?

QueryClient

使用此参数可指定自定义的 QueryClient;否则将使用离当前组件最近的上下文中的 QueryClient。

返回值

TResult[]

返回一个数组,其中每个元素均为 select 对每个匹配修改所返回的结果。

示例

获取所有正在运行的修改的 variables:

TypeScript
1import { useMutationState } from '@tanstack/react-query'2 3function PendingPosts() {4  const pendingVariables = useMutationState({5    filters: { status: 'pending' },6    select: (mutation) => mutation.state.variables,7  })8 9  return <>{pendingVariables.length} posts saving...</>10}

通过 mutationKey 获取特定修改的所有 data:

TypeScript
1import { useMutation, useMutationState } from '@tanstack/react-query'2 3const mutationKey = ['posts']4 5function Posts() {6  // Some mutation that we want to get the state for7  const mutation = useMutation({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 18  return (19    <button onClick={() => mutation.mutate(['New Post'])}>20      Create post ({savedPosts.length} saved so far)21    </button>22  )23}

通过 mutationKey 访问最新的成功修改 data。每次调用 mutate 都会为 gcTime 毫秒向修改缓存中添加一条新记录——配合下方的 status: 'success' 筛选器,检查 useMutationState 返回结果的最后一项即可获得最新的成功调用:

TypeScript
1import { useMutationState } from '@tanstack/react-query'2 3function LatestPost() {4  const savedPosts = useMutationState({5    filters: { mutationKey: ['posts'], status: 'success' },6    select: (mutation) => mutation.state.data,7  })8 9  const latestSavedPost = savedPosts[savedPosts.length - 1]10 11  return <>{latestSavedPost ? 'Saved' : 'Nothing saved yet'}</>12}

本页为 TanStack Query 文档(React 版)的非官方中文翻译,原文由上游团队维护,遵循 MIT 许可。 译文如有偏差,以英文原文为准。

译自上游 59d11de