Mutations

useMutation

A differenza delle queries (che vengono eseguite automaticamente), le mutations vengono attivate manualmente (es. al click di un bottone).

```tsx import { useMutation, useQueryClient } from ‘@tanstack/react-query’

function AddTodo() { const queryClient = useQueryClient()

const mutation = useMutation({ mutationFn: (newTodo) => { return axios.post(‘/todos’, newTodo) }, onSuccess: () => { // Invalida e rifetch della query ‘todos’ dopo il salvataggio queryClient.invalidateQueries({ queryKey: [‘todos’] }) }, })

return (

{mutation.isPending ? ( ‘Aggiungendo…’ ) : ( <> {mutation.isError ? (

An error occurred: {mutation.error.message}

) : null}

      {mutation.isSuccess ? <div>Todo added!</div> : null}

      <button
        onClick={() => {
          mutation.mutate({ id: new Date(), title: 'Do Laundry' })
        }}
      >
        Create Todo
      </button>
    </>
  )}
</div>

) } ```

Ottimistic Updates

Puoi aggiornare la UI prima che il server risponda, per un’esperienza ultra-veloce. Se la richiesta fallisce, fai rollback. Si usa onMutate, onError e onSettled.

Contenuto redatto con l'assistenza di strumenti di intelligenza artificiale e rivisto dalla redazione di Codegrind, che ne è responsabile. Hai trovato un errore? Scrivici.