useMutation per modificare i dati
useMutation(MUTATION), mutate(), strategie di aggiornamento della cache, risposte ottimistiche.
useMutation per modificare i dati è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 4 lezioni in totale.
Modifica dei dati con le mutation
Le query leggono i dati; le mutation li modificano: creazione, aggiornamento ed eliminazione. Il composable useMutation esegue una mutation GraphQL e fornisce una funzione mutate da chiamare quando necessario.
Utilizzo di base di useMutation
Passi un documento di mutation. A differenza di useQuery, non viene eseguito immediatamente: restituisce una funzione mutate da invocare in risposta a un evento.
import { useMutation } from '@vue/apollo-composable'
import { gql } from '@apollo/client/core'
const { mutate } = useMutation(gql(
'mutation { addPost { id } }'
))Eseguire la mutation
Chiami mutate() da un gestore di eventi, ad esempio durante l'invio di un modulo. Restituisce una Promise che si risolve con il risultato.
async function submit() {
await mutate()
}Passare le variabili
Passi a mutate un oggetto contenente le variabili. Il documento della mutation le dichiara usando la sintassi con $.
const { mutate } = useMutation(gql(
'mutation($title: String!) { addPost(title: $title) { id title } }'
))
function add(title) {
return mutate({ title })
}Caricamento ed errore
useMutation restituisce anche i ref loading e error, che consentono di disabilitare il pulsante di invio e mostrare gli errori.
<template>
<button :disabled="loading" @click="submit">Save</button>
<p v-if="error">{{ error.message }}</p>
</template>Reagire al successo
L'hook onDone viene eseguito dopo una mutation riuscita: può svuotare un modulo, mostrare una notifica oppure eseguire una navigazione.
const { mutate, onDone } = useMutation(ADD_POST)
onDone((res) => {
console.log('Created', res.data.addPost.id)
})Aggiornare la cache
Dopo una mutation, la cache di Apollo potrebbe non essere aggiornata. La funzione update consente di modificare direttamente la cache, così l'interfaccia riflette la modifica senza dover eseguire un refetch.
useMutation(ADD_POST, {
update(cache, { data }) {
const existing = cache.readQuery({ query: GET_POSTS })
cache.writeQuery({
query: GET_POSTS,
data: { posts: [...existing.posts, data.addPost] }
})
}
})Perché update è meglio di un refetch
Un update della cache evita un ulteriore round trip di rete. Il nuovo elemento appare immediatamente perché lo avete scritto nella cache da cui ogni useQuery legge i dati.
Eseguire invece il refetch delle query
Se modificare manualmente la cache è troppo laborioso, usate refetchQueries per eseguire nuovamente query specifiche al completamento della mutation.
useMutation(ADD_POST, {
refetchQueries: [{ query: GET_POSTS }]
})Risposte ottimistiche
Un optimisticResponse aggiorna l'interfaccia prima della risposta del server, presupponendo che l'operazione abbia successo. Se la richiesta non va a buon fine, Apollo annulla automaticamente la modifica.
mutate(
{ title: 'New' },
{
optimisticResponse: {
addPost: { __typename: 'Post', id: 'temp', title: 'New' }
}
}
)Perché l'interfaccia ottimistica è importante
Gli aggiornamenti ottimistici fanno sembrare l'app immediata: l'utente vede subito applicata la propria azione. Insieme a update, l'elemento temporaneo viene sostituito dai dati reali del server quando arrivano.
Verifica rapida
Verifichi la Sua conoscenza delle mutation.
Riepilogo
Ha imparato a usare le mutation:
- useMutation restituisce una funzione mutate da chiamare in risposta agli eventi.
- Passi le variabili a mutate(); usi loading/error e onDone.
- La funzione update modifica la cache dopo una mutation, evitando un refetch.
- optimisticResponse aggiorna immediatamente l'interfaccia e annulla automaticamente la modifica in caso di errore.
Domande Frequenti
La lezione «useMutation per modificare i dati» è gratuita?
Sì — il testo completo di «useMutation per modificare i dati» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Vue Academy, passa a CoddyKit PRO. Il corso Vue Academy include 4 lezioni in totale.
Cosa imparerò in «useMutation per modificare i dati»?
useMutation(MUTATION), mutate(), strategie di aggiornamento della cache, risposte ottimistiche. Eserciti Vue Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Vue Academy?
Non è richiesta alcuna esperienza precedente. Vue Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.
Quanto tempo richiede la lezione «useMutation per modificare i dati»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Vue Academy?
Sì. Ogni lezione Vue Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Configurazione di Apollo Client in Vue 3
- useQuery per il recupero dei dati
- useMutation per modificare i dati
- Subscription in tempo reale con useSubscription