MutationObserver

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

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, options): MutationObserver<TData, TError, TVariables, TOnMutateResult>;

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

Parameters#

client#

QueryClient

options#

MutationObserverOptions<TData, TError, TVariables, TOnMutateResult>

Returns#

MutationObserver<TData, TError, TVariables, TOnMutateResult>

Overrides#

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

Properties#

listeners#

protected listeners: Set<MutationObserverListener<TData, TError, TVariables, TOnMutateResult>>;

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

Inherited from#

Subscribable.listeners

options#

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

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

Methods#

bindMethods()#

protected bindMethods(): void;

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

Returns#

void

getCurrentResult()#

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

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

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>

hasListeners()#

hasListeners(): boolean;

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

Returns#

boolean

Inherited from#

Subscribable.hasListeners

mutate()#

mutate(variables, options?): Promise<TData>;

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

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

options?#

MutateOptions<TData, TError, TVariables, TOnMutateResult>

Returns#

Promise<TData>

Example#

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

onSubscribe()#

protected onSubscribe(): void;

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

Returns#

void

Overrides#

Subscribable.onSubscribe

onUnsubscribe()#

protected onUnsubscribe(): void;

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

Returns#

void

Overrides#

Subscribable.onUnsubscribe

reset()#

reset(): void;

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

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

Example#

observer.reset()

See#

MutationObserver#mutate

setOptions()#

setOptions(options): void;

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

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>

Returns#

void

Example#

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

subscribe()#

subscribe(listener): () => void;

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

Parameters#

listener#

MutationObserverListener

Returns#

(): void;

Returns#

void

Inherited from#

Subscribable.subscribe