useMutation für Datenänderungen
useMutation(MUTATION), mutate(), Strategien zur Cache-Aktualisierung und optimistische Antworten
useMutation für Datenänderungen ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Vue Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.
Daten mit Mutationen ändern
Abfragen lesen Daten; Mutationen ändern sie – sie erstellen, aktualisieren oder löschen Daten. Das Composable useMutation führt eine GraphQL-Mutation aus und stellt eine mutate-Funktion bereit, die Sie bei Bedarf aufrufen können.
Grundlegende Verwendung von useMutation
Übergeben Sie ein Mutationsdokument. Anders als useQuery wird die Mutation nicht sofort ausgeführt – stattdessen gibt sie eine mutate-Funktion zurück, die Sie bei einem Ereignis aufrufen.
import { useMutation } from '@vue/apollo-composable'
import { gql } from '@apollo/client/core'
const { mutate } = useMutation(gql(
'mutation { addPost { id } }'
))Mutation auslösen
Rufen Sie mutate() in einem Event-Handler auf, etwa beim Absenden eines Formulars. Die Funktion gibt ein Promise zurück, das mit dem Ergebnis aufgelöst wird.
async function submit() {
await mutate()
}Variablen übergeben
Übergeben Sie ein Objekt mit Variablen an mutate. Das Mutationsdokument deklariert sie mit der $-Syntax.
const { mutate } = useMutation(gql(
'mutation($title: String!) { addPost(title: $title) { id title } }'
))
function add(title) {
return mutate({ title })
}Ladezustand und Fehler
useMutation gibt außerdem die Refs loading und error zurück, sodass Sie die Schaltfläche zum Absenden deaktivieren und Fehler anzeigen können.
<template>
<button :disabled="loading" @click="submit">Save</button>
<p v-if="error">{{ error.message }}</p>
</template>Auf Erfolg reagieren
Der onDone-Hook wird nach einer erfolgreichen Mutation ausgelöst — leeren Sie ein Formular, zeigen Sie eine Toast-Nachricht an oder navigieren Sie weg.
const { mutate, onDone } = useMutation(ADD_POST)
onDone((res) => {
console.log('Created', res.data.addPost.id)
})Cache aktualisieren
Nach einer Mutation kann der Apollo-Cache veraltet sein. Mit der Funktion update können Sie den Cache direkt ändern, sodass die UI die Änderung ohne erneuten Abruf widerspiegelt.
useMutation(ADD_POST, {
update(cache, { data }) {
const existing = cache.readQuery({ query: GET_POSTS })
cache.writeQuery({
query: GET_POSTS,
data: { posts: [...existing.posts, data.addPost] }
})
}
})Warum update besser ist als Refetch
Ein Cache-update vermeidet einen zusätzlichen Netzwerk-Roundtrip. Das neue Element erscheint sofort, weil Sie es in den Cache geschrieben haben, aus dem jedes useQuery liest.
Queries stattdessen refetchen
Wenn die manuelle Bearbeitung des Caches zu umständlich ist, verwenden Sie refetchQueries, um bestimmte Queries nach Abschluss der Mutation erneut auszuführen.
useMutation(ADD_POST, {
refetchQueries: [{ query: GET_POSTS }]
})Optimistische Antworten
Eine optimisticResponse aktualisiert die UI vor der Antwort des Servers und geht dabei von Erfolg aus. Wenn die Anfrage fehlschlägt, macht Apollo die Änderung automatisch rückgängig.
mutate(
{ title: 'New' },
{
optimisticResponse: {
addPost: { __typename: 'Post', id: 'temp', title: 'New' }
}
}
)Warum eine optimistische UI wichtig ist
Optimistische Aktualisierungen lassen die App sofort reagieren — die Benutzer sehen unmittelbar, dass ihre Aktion wirksam wird. In Kombination mit update wird das vorläufige Element durch die echten Serverdaten ersetzt, sobald diese eintreffen.
Schnelltest
Testen Sie Ihr Wissen über Mutationen.
Zusammenfassung
Sie haben Mutationen kennengelernt:
- useMutation gibt eine mutate-Funktion zurück, die Sie bei Ereignissen aufrufen.
- Übergeben Sie Variablen an mutate(); verwenden Sie loading/error und onDone.
- Die update-Funktion bearbeitet den Cache nach einer Mutation und macht so einen Refetch überflüssig.
- optimisticResponse aktualisiert die UI sofort und macht die Änderung automatisch rückgängig.
Häufig gestellte Fragen
Ist die Lektion „useMutation für Datenänderungen“ kostenlos?
Ja — der vollständige Text von „useMutation für Datenänderungen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Vue Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „useMutation für Datenänderungen“?
useMutation(MUTATION), mutate(), Strategien zur Cache-Aktualisierung und optimistische Antworten Du übst Vue Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Vue Academy zu starten?
Keine Vorkenntnisse erforderlich. Vue Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.
Wie lange dauert die Lektion „useMutation für Datenänderungen“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Vue Academy-Lektion Code schreiben und ausführen?
Ja. Jede Vue Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Apollo-Client-Einrichtung in Vue 3
- useQuery zum Abrufen von Daten
- useMutation für Datenänderungen
- Echtzeit-Subscriptions mit useSubscription