mutationOptions

Call Signature

function mutationOptions<TData, TError, TVariables, TOnMutateResult>(options): WithRequired<UseMutationOptions<TData, TError, TVariables, TOnMutateResult>, "mutationKey">;

Defined in: preact-query/src/mutationOptions.ts:49

You can generally pass everything to mutationOptions that you can also pass to useMutation. A mutationKey is required on this overload so the mutation can be looked up later, e.g. with useMutationState.

Type Parameters

TData

TData = unknown

TError

TError = Error

TVariables

TVariables = void

TOnMutateResult

TOnMutateResult = unknown

Parameters

options

WithRequired<UseMutationOptions<TData, TError, TVariables, TOnMutateResult>, "mutationKey">

The mutation options to use, identical to what you'd pass to useMutation, with a required mutationKey.

Returns

WithRequired<UseMutationOptions<TData, TError, TVariables, TOnMutateResult>, "mutationKey">

The same options object, unchanged.

See

useMutation to run the mutation these options describe.

Examples

tsx

import { mutationOptions, useMutation } from '@tanstack/preact-query'

export const createPostOptions = mutationOptions({
  mutationKey: ['posts', 'create'],
  mutationFn: createPost,
})

function CreatePost() {
  const mutation = useMutation(createPostOptions)
  return <button onClick={() => mutation.mutate({ title: 'Hello' })}>Create</button>
}

Looking the mutation up elsewhere via its mutationKey, e.g. for a global "saving…" indicator:

tsx

import { mutationOptions, useMutationState } from '@tanstack/preact-query'

const createPostOptions = mutationOptions({
  mutationKey: ['posts', 'create'],
  mutationFn: createPost,
})

function SavingIndicator() {
  const isCreatingPost = useMutationState({
    filters: { mutationKey: createPostOptions.mutationKey, status: 'pending' },
  }).length > 0

  return isCreatingPost ? <span>Saving…</span> : null
}