useMutationState

useMutationState 是一个 React Hook，它让你可以访问 MutationCache 中的所有突变（mutations）。你可以通过传入 filters 来筛选特定的突变，并使用 select 来转换突变状态。

---

示例 1：获取所有正在运行的突变的变量

import { useMutationState } from '@tanstack/react-query'

const variables = useMutationState({
  filters: { status: 'pending' },
  select: (mutation) => mutation.state.variables,
})

此示例获取所有状态为“进行中”（pending）的突变，并提取它们的 variables（即调用 mutate 时传入的参数）。

---

示例 2：通过 mutationKey 获取特定突变的所有数据

import { useMutation, useMutationState } from '@tanstack/react-query'

const mutationKey = ['posts']

// 某个我们想获取其状态的突变
const mutation = useMutation({
  mutationKey,
  mutationFn: (newPost) => {
    return axios.post('/posts', newPost)
  },
})

const data = useMutationState({
  // 此 mutationKey 必须与上面定义的突变的 mutationKey 一致
  filters: { mutationKey },
  select: (mutation) => mutation.state.data,
})

此示例通过 mutationKey 筛选出与 ['posts'] 相关的所有突变，并提取它们的返回数据 data。

---

示例 3：通过 mutationKey 访问最新的突变数据

每次调用 mutate 都会在突变缓存中创建一个新的条目，该条目会保留 gcTime 毫秒。

要访问最近一次调用的数据，可以检查 useMutationState 返回数组的最后一个元素。

import { useMutation, useMutationState } from '@tanstack/react-query'

const mutationKey = ['posts']

// 某个我们想获取其状态的突变
const mutation = useMutation({
  mutationKey,
  mutationFn: (newPost) => {
    return axios.post('/posts', newPost)
  },
})

const data = useMutationState({
  // 此 mutationKey 必须与上面定义的突变的 mutationKey 一致
  filters: { mutationKey },
  select: (mutation) => mutation.state.data,
})

// 最近一次突变的数据
const latest = data[data.length - 1]

---

配置项（Options）

• options

  • filters?: MutationFilters

    • 可选。用于筛选突变的条件。

    • 详见 突变筛选器（Mutation Filters）。

  • select?: (mutation: Mutation) => TResult

    • 可选。用于转换每个突变的状态。

    • 接收一个 Mutation 对象，返回你想要的数据结构。

• queryClient?: QueryClient

  • 可选。用于指定自定义的 QueryClient 实例。

  • 若未提供，则使用最近上下文中的 QueryClient。

---

返回值（Returns）

• Array<TResult>

  • 返回一个数组，数组中的每一项是 select 函数对每个匹配的突变处理后的结果。

  • 如果没有匹配的突变，则返回空数组 []。

提示：useMutationState 非常适合用于监控多个突变的状态，例如显示全局加载指示器、收集错误信息或实现乐观更新的撤销功能。