API Documentation / @pinia/colada / defineMutation

Function: defineMutation()

Call Signature

function defineMutation<TResult, TVars, TError, TContext>(options): () => UseMutationReturn<TResult, TVars, TError>

Define a mutation with the given options. Similar to useMutation(options) but allows you to reuse the mutation in multiple places.

Type Parameters

TResult

TResult

TVars

TVars = void

TError

TError = { custom: Error; }

TContext

TContext extends Record<any, any> = _EmptyObject

Parameters

options

UseMutationOptions<TResult, TVars, TError, TContext>

the options to define the mutation

Returns

Function

Returns

UseMutationReturn<TResult, TVars, TError>

Example

const useCreateTodo = defineMutation({
  mutation: (todoText: string) =>
    fetch('/api/todos', {
      method: 'POST',
      body: JSON.stringify({ text: todoText }),
    }),
})

Call Signature

function defineMutation<T>(setup): () => T

Define a mutation with a function setup. Allows to return arbitrary values from the mutation function, create contextual refs, rename the returned values, etc.

Type Parameters

T

T

Parameters

setup

() => T

a function to setup the mutation

Returns

Function

Returns

T

Example

const useCreateTodo = defineMutation(() => {
  const todoText = ref('')
  const { data, mutate, ...rest } = useMutation({
    mutation: () =>
      fetch('/api/todos', {
        method: 'POST',
        body: JSON.stringify({ text: todoText.value }),
      }),
  })
  // expose the todoText ref and rename other methods for convenience
  return { ...rest, createTodo: mutate, todo: data, todoText }
})