MutationObserver

Defined in: packages/query-core/src/mutationObserver.ts:37

Observes a single mutation and derives a MutationObserverResult from it. A framework hook like useMutation creates one MutationObserver per hook call, keeps it stable across re-renders, calls setOptions when the options passed to the hook change, subscribes to it to re-render on updates, and reads getCurrentResult() for the value to return. Calling mutate() builds a new underlying Mutation in the MutationCache and executes it.

Example

const observer = new MutationObserver(queryClient, {
  mutationFn: (variables: { title: string }) => addPost(variables),
})

Extends

• Subscribable<MutationObserverListener<TData, TError, TVariables, TOnMutateResult>>

Type Parameters

TData

TData = unknown

TError

TError = DefaultError

TVariables

TVariables = void

TOnMutateResult

TOnMutateResult = unknown

Constructors

Constructor

new MutationObserver<TData, TError, TVariables, TOnMutateResult>(client: QueryClient, options: MutationObserverOptions<TData, TError, TVariables, TOnMutateResult>): MutationObserver<TData, TError, TVariables, TOnMutateResult>;

Defined in: packages/query-core/src/mutationObserver.ts:57

Parameters

client

QueryClient

options

MutationObserverOptions<TData, TError, TVariables, TOnMutateResult>

Returns

MutationObserver<TData, TError, TVariables, TOnMutateResult>

Overrides

Subscribable<
  MutationObserverListener<TData, TError, TVariables, TOnMutateResult>
>.constructor

Properties

options

options: MutationObserverOptions<TData, TError, TVariables, TOnMutateResult>;

Defined in: packages/query-core/src/mutationObserver.ts:45

Methods

getCurrentResult()

getCurrentResult(): MutationObserverResult<TData, TError, TVariables, TOnMutateResult>;

Defined in: packages/query-core/src/mutationObserver.ts:165

Returns the observer's current result, derived from the observed mutation's state (or the default, idle state if no mutation has been built yet, e.g. before the first mutate() call or after reset()).

Returns

MutationObserverResult<TData, TError, TVariables, TOnMutateResult>

The observer's latest result.

hasListeners()

hasListeners(): boolean;

Defined in: packages/query-core/src/subscribable.ts:43

Returns true while at least one listener is registered, false once they have all unsubscribed.

Returns

boolean

true if at least one listener is registered.

Inherited from

Subscribable.hasListeners

mutate()

mutate(variables: TVariables, options?: MutateOptions<TData, TError, TVariables, TOnMutateResult>): Promise<TData>;

Defined in: packages/query-core/src/mutationObserver.ts:217

Builds a new Mutation in the MutationCache using the observer's current options, detaches this observer from any previously observed mutation, attaches it to the new one, and executes it with the given variables.

The optional per-call options (onSuccess/onError/onSettled) are invoked once the mutation settles, in addition to any callbacks defined on the observer's own options.

Parameters

variables

TVariables

The variables passed to the mutationFn.

options?

MutateOptions<TData, TError, TVariables, TOnMutateResult>

Per-call onSuccess, onError, and onSettled callbacks.

Returns

Promise<TData>

A promise that resolves with the mutation's data, or rejects with its error.

Example

await observer.mutate(
  { title: 'New post' },
  { onSuccess: (data) => console.log(data) },
)

reset()

reset(): void;

Defined in: packages/query-core/src/mutationObserver.ts:188

Detaches the observer from the mutation it is currently observing (if any) and resets the observed result back to its default, idle state.

This does not cancel an in-flight mutation; the mutation itself keeps running to completion and its own callbacks still fire, but this observer stops reflecting its state and a subsequent mutate() call will build a brand new mutation.

Returns

void

See

MutationObserver#mutate

Example

observer.reset()

setOptions()

setOptions(options: MutationObserverOptions<TData, TError, TVariables, TOnMutateResult>): void;

Defined in: packages/query-core/src/mutationObserver.ts:100

Updates the observer's options.

If the new mutationKey differs from the previous one (and both were defined), the observer is reset, detaching it from the mutation it was observing. Otherwise, if the currently observed mutation is still pending, its options are updated in place as well.

Parameters

options

MutationObserverOptions<TData, TError, TVariables, TOnMutateResult>

The new mutation observer options. They are defaulted with QueryClient#defaultMutationOptions before being applied.

Returns

void

Example

observer.setOptions({
  mutationFn: (variables: { title: string }) => addPost(variables),
  onSuccess: (data) => console.log(data),
})

subscribe()

subscribe(listener: MutationObserverListener): () => void;

Defined in: packages/query-core/src/subscribable.ts:28

Registers a listener to be called on every update this object notifies about. Returns a function that removes the listener again — call it to stop listening. The base class never drops a listener on its own, though some subclasses clear all of theirs in destroy().

Parameters

listener

MutationObserverListener

Called on each update, with whatever the subclass passes to its subscribers.

Returns

A function that removes the listener.

() => void

Example

const unsubscribe = subscribable.subscribe(() => {
  // react to the update
})

unsubscribe()

Inherited from

Subscribable.subscribe