Clarification on Using Refs vs. Parameters in Reusable Mutations

[loic-bellinger]

Hi

I'm reading through the Reusable Mutations section of the Pinia Colada documentation, and I'm a bit confused about the usage patterns shown.

In the example below, a ref is used to store todoText:

import { ref } from 'vue'
import { defineMutation, useMutation } from '@pinia/colada'

export const useCreateTodo = defineMutation(() => {
  const todoText = ref('')
  const { mutate: createTodo, ...mutation } = useMutation({
    mutation: () =>
      fetch('/api/todos', {
        method: 'POST',
        body: JSON.stringify({ text: todoText.value }),
      }),
  })

  return {
    ...mutation,
    createTodo,
    // expose the todoText ref
    todoText,
  }
})

However, earlier in the docs it suggests passing parameters directly to the mutation function. This makes me wonder: why is a ref used in the example above? Is it implying that the following approach is less ideal?

export const useUpdateSitesVisibility = defineMutation(() => {
  return useMutation({
    mutation: (payload) => apiClient.post('/endpoint', payload),
  })
})

[posva]

It's indeed better to pass the parameter. It is not needed, though. It's just useful for hooks and plugins. I updated the docs at 61e3363

[loic-bellinger]

Thanks!