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/preact-query/src/useMutationState.ts:183
useMutationState 是一个 Hook,用于访问 MutationCache 中的所有修改(mutations)。你可以传入 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。
返回值
TResult[]
返回一个数组,其中每个元素均为 select 对应各匹配修改所返回的结果。
示例
获取所有正在运行的修改的变量:
TypeScript
1import { useMutationState } from '@tanstack/preact-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 获取特定修改的所有数据:
TypeScript
1import { useMutation, useMutationState } from '@tanstack/preact-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 访问最新一次成功执行的修改数据。每次调用 mutate 都会为 gcTime 毫秒向修改缓存中添加一条新记录;配合下方的 status: 'success' 筛选器,检查 useMutationState 返回数组的最后一项,即可获得最新一次成功调用的数据:
TypeScript
1import { useMutationState } from '@tanstack/preact-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}