useMutation do zmiany danych
useMutation(MUTATION), mutate(), strategie aktualizacji cache oraz optymistyczne odpowiedzi.
useMutation do zmiany danych to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 4 lekcji w sumie.
Zmienianie danych za pomocą mutacji
Zapytania odczytują dane, a mutacje je zmieniają — tworzą, aktualizują lub usuwają. Composable useMutation wykonuje mutację GraphQL i udostępnia funkcję mutate, którą można wywołać w odpowiednim momencie.
Podstawowe użycie useMutation
Przekaż dokument mutacji. W przeciwieństwie do useQuery nie uruchamia się ona od razu — zwraca funkcję mutate, którą wywołujesz w reakcji na zdarzenie.
import { useMutation } from '@vue/apollo-composable'
import { gql } from '@apollo/client/core'
const { mutate } = useMutation(gql(
'mutation { addPost { id } }'
))Uruchamianie mutacji
Należy wywołać mutate() z poziomu obsługi zdarzenia, na przykład wysłania formularza. Funkcja zwraca obiekt Promise, który zostaje rozstrzygnięty wynikiem.
async function submit() {
await mutate()
}Przekazywanie zmiennych
Do mutate należy przekazać obiekt zmiennych. Dokument mutacji deklaruje je za pomocą składni $.
const { mutate } = useMutation(gql(
'mutation($title: String!) { addPost(title: $title) { id title } }'
))
function add(title) {
return mutate({ title })
}Ładowanie i błąd
useMutation zwraca także refy loading i error, dzięki czemu można wyłączyć przycisk wysyłania i wyświetlić informacje o błędach.
<template>
<button :disabled="loading" @click="submit">Save</button>
<p v-if="error">{{ error.message }}</p>
</template>Obsługa pomyślnego wykonania
Hook onDone uruchamia się po pomyślnym wykonaniu mutacji — można wyczyścić formularz, wyświetlić toast lub przejść do innego widoku.
const { mutate, onDone } = useMutation(ADD_POST)
onDone((res) => {
console.log('Created', res.data.addPost.id)
})Aktualizowanie cache
Po mutacji cache Apollo może zawierać nieaktualne dane. Funkcja update pozwala bezpośrednio zmodyfikować cache, aby interfejs odzwierciedlał zmianę bez ponownego pobierania danych.
useMutation(ADD_POST, {
update(cache, { data }) {
const existing = cache.readQuery({ query: GET_POSTS })
cache.writeQuery({
query: GET_POSTS,
data: { posts: [...existing.posts, data.addPost] }
})
}
})Dlaczego update jest lepsze niż refetch
Aktualizacja cache za pomocą update eliminuje dodatkowe żądanie sieciowe. Nowy element pojawia się natychmiast, ponieważ zapisano go w cache, z którego odczytuje każda funkcja useQuery.
Ponowne pobieranie zapytań zamiast tego
Jeśli ręczna edycja cache jest zbyt kłopotliwa, można użyć refetchQueries, aby po zakończeniu mutacji ponownie wykonać określone zapytania.
useMutation(ADD_POST, {
refetchQueries: [{ query: GET_POSTS }]
})Odpowiedzi optymistyczne
optimisticResponse aktualizuje interfejs zanim serwer odpowie, zakładając powodzenie operacji. Jeśli żądanie się nie powiedzie, Apollo automatycznie wycofa zmianę.
mutate(
{ title: 'New' },
{
optimisticResponse: {
addPost: { __typename: 'Post', id: 'temp', title: 'New' }
}
}
)Dlaczego optymistyczny interfejs ma znaczenie
Optymistyczne aktualizacje sprawiają, że aplikacja wydaje się natychmiastowa — użytkownik od razu widzi skutek swojego działania. W połączeniu z update tymczasowy element zostaje zastąpiony prawdziwymi danymi z serwera, gdy tylko nadejdą.
Szybkie sprawdzenie
Proszę sprawdzić swoją wiedzę o mutacjach.
Podsumowanie
W tej lekcji poznano mutacje:
- useMutation zwraca funkcję mutate, którą wywołuje się w reakcji na zdarzenia.
- Do mutate() przekazuje się zmienne; można korzystać z loading/error i onDone.
- Funkcja update modyfikuje cache po mutacji, eliminując konieczność ponownego pobierania danych.
- optimisticResponse natychmiast aktualizuje interfejs i automatycznie wycofuje zmianę w razie błędu.
Ucz się HTML dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 42
- Lekcje
- 156
Często zadawane pytania
Czy lekcja „useMutation do zmiany danych” jest bezpłatna?
Tak — pełny tekst „useMutation do zmiany danych” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Vue Academy, przejdź na CoddyKit PRO. Kurs Vue Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „useMutation do zmiany danych”?
useMutation(MUTATION), mutate(), strategie aktualizacji cache oraz optymistyczne odpowiedzi. Ćwiczysz Vue Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Vue Academy?
Nie wymagamy żadnego doświadczenia. Vue Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.
Ile czasu zajmuje lekcja „useMutation do zmiany danych”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Vue Academy?
Tak. Każda lekcja Vue Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Konfiguracja Apollo Client w Vue 3
- useQuery do pobierania danych
- useMutation do zmiany danych
- Subskrypcje czasu rzeczywistego z useSubscription