useMutationState
useMutationState 是一个钩子，可让您访问 MutationCache 中的所有 mutation。您可以将 filters 传递给它以缩小 mutation 的范围，并通过 select 来转换 mutation 状态。
示例 1：获取所有正在运行的 mutations 的所有变量
tsx
import { useMutationState } from '@tanstack/vue-query'
const variables = useMutationState({
filters: { status: 'pending' },
select: (mutation) => mutation.state.variables,
})
import { useMutationState } from '@tanstack/vue-query'
const variables = useMutationState({
filters: { status: 'pending' },
select: (mutation) => mutation.state.variables,
})
示例 2：通过 mutationKey 获取特定 mutations 的所有数据
tsx
import { useMutation, useMutationState } from '@tanstack/vue-query'
const mutationKey = ['posts']
// Some mutation that we want to get the state for
const mutation = useMutation({
mutationKey,
mutationFn: (newPost) => {
return axios.post('/posts', newPost)
},
})
const data = useMutationState({
// this mutation key needs to match the mutation key of the given mutation (see above)
filters: { mutationKey },
select: (mutation) => mutation.state.data,
})
import { useMutation, useMutationState } from '@tanstack/vue-query'
const mutationKey = ['posts']
// Some mutation that we want to get the state for
const mutation = useMutation({
mutationKey,
mutationFn: (newPost) => {
return axios.post('/posts', newPost)
},
})
const data = useMutationState({
// this mutation key needs to match the mutation key of the given mutation (see above)
filters: { mutationKey },
select: (mutation) => mutation.state.data,
})
示例 3：通过 mutationKey 访问最新的 mutation 数据。每次调用 mutate 都会在 mutation cache 中为 gcTime 毫秒添加新条目。
要访问最新的调用，你可以检查 useMutationState 返回的最后一个条目。
tsx
import { useMutation, useMutationState } from '@tanstack/vue-query'
const mutationKey = ['posts']
// Some mutation that we want to get the state for
const mutation = useMutation({
mutationKey,
mutationFn: (newPost) => {
return axios.post('/posts', newPost)
},
})
const data = useMutationState({
// this mutation key needs to match the mutation key of the given mutation (see above)
filters: { mutationKey },
select: (mutation) => mutation.state.data,
})
// Latest mutation data
const latest = data[data.length - 1]
import { useMutation, useMutationState } from '@tanstack/vue-query'
const mutationKey = ['posts']
// Some mutation that we want to get the state for
const mutation = useMutation({
mutationKey,
mutationFn: (newPost) => {
return axios.post('/posts', newPost)
},
})
const data = useMutationState({
// this mutation key needs to match the mutation key of the given mutation (see above)
filters: { mutationKey },
select: (mutation) => mutation.state.data,
})
// Latest mutation data
const latest = data[data.length - 1]
选项
- options
- filters?: MutationFilters: Mutation Filters
- select?: (mutation: Mutation) => TResult
- 使用此选项来转换 mutation 状态。
- queryClient?: QueryClient
- 使用此选项可以使用自定义 QueryClient。否则，将使用最近上下文中的 QueryClient。
Returns (返回)
- Array<TResult>
- 这将是 `select` 为每个匹配的 mutation 返回的任何内容的数组。
