框架
版本

MutationCache

MutationCache 是变更的存储。

通常,您不会直接与 MutationCache 交互,而是使用 QueryClient

tsx
import { MutationCache } from '@tanstack/react-query'

const mutationCache = new MutationCache({
  onError: (error) => {
    console.log(error)
  },
  onSuccess: (data) => {
    console.log(data)
  },
})
import { MutationCache } from '@tanstack/react-query'

const mutationCache = new MutationCache({
  onError: (error) => {
    console.log(error)
  },
  onSuccess: (data) => {
    console.log(data)
  },
})

其可用方法有:

选项

  • onError?: (error: unknown, variables: unknown, context: unknown, mutation: Mutation) => Promise<unknown> | unknown
    • 可选
    • 如果某个变更遇到错误,则将调用此函数。
    • 如果您从中返回一个 Promise,则会等待它
  • onSuccess?: (data: unknown, variables: unknown, context: unknown, mutation: Mutation) => Promise<unknown> | unknown
    • 可选
    • 如果某个变更成功,则将调用此函数。
    • 如果您从中返回一个 Promise,则会等待它
  • onSettled?: (data: unknown | undefined, error: unknown | null, variables: unknown, context: unknown, mutation: Mutation) => Promise<unknown> | unknown
    • 可选
    • 如果某个变更已完成(成功或出错),则将调用此函数。
    • 如果您从中返回一个 Promise,则会等待它
  • onMutate?: (variables: unknown, mutation: Mutation) => Promise<unknown> | unknown
    • 可选
    • 在某个变更执行之前,将调用此函数。
    • 如果您从中返回一个 Promise,则会等待它

全局回调

MutationCache 上的 onErroronSuccessonSettledonMutate 回调可用于在全局级别处理这些事件。它们与提供给 QueryClient 的 defaultOptions 不同,因为:

  • defaultOptions 可以被每个变更覆盖 - 全局回调将始终被调用。
  • onMutate 不允许返回上下文值。

mutationCache.getAll

getAll 返回缓存中的所有变更。

注意:这对于大多数应用程序来说通常不是必需的,但在极少数情况下需要有关变更的更多信息时会很有用

tsx
const mutations = mutationCache.getAll()
const mutations = mutationCache.getAll()

返回值

  • Mutation[]
    • 缓存中的变更实例

mutationCache.subscribe

subscribe 方法可用于订阅整个变更缓存,并获知缓存的安全/已知更新,例如变更状态更改或变更被更新、添加或删除。

tsx
const callback = (event) => {
  console.log(event.type, event.mutation)
}

const unsubscribe = mutationCache.subscribe(callback)
const callback = (event) => {
  console.log(event.type, event.mutation)
}

const unsubscribe = mutationCache.subscribe(callback)

选项

  • callback: (mutation?: MutationCacheNotifyEvent) => void
    • 每当变更缓存更新时,都会使用变更缓存调用此函数。

返回值

  • unsubscribe: Function => void
    • 此函数将从变更缓存中取消订阅回调。

mutationCache.clear

clear 方法可用于完全清除缓存并重新开始。

tsx
mutationCache.clear()
mutationCache.clear()