PricingLoginStart free
React Academy · Lektion

Mutationer med useMutation

Send data til API’er med useMutation, håndtér indlæsnings- og fejltilstande, og ugyldiggør forespørgsler ved succes.

Lektion 3 af 413 trin

Mutationer med useMutation er en gratis React Academy-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i React Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. React Academy-kurset indeholder 4 lektioner i alt.

Velkommen

I denne lektion bruger du useMutation til at sende data til API'er, håndtere indlæsnings- og fejltilstande og ugyldiggøre forældede forespørgsler efter vellykkede mutationer.

Grundlæggende om useMutation

Kald useMutation med en mutationFn. Den returnerer en mutate-funktion og statusfelter. Kald mutate() for at udløse handlingen.
import { useMutation } from '@tanstack/react-query';

const { mutate, isLoading, isError } = useMutation({
  mutationFn: (newPost) => fetch('/api/posts', {
    method: 'POST',
    body: JSON.stringify(newPost),
  }).then(r => r.json()),
});

Kald af mutate

Kald `mutate(variables)` fra en hændelseshandler. Variablerne sendes til mutationFn som det første argument.
<button onClick={() => mutate({ title: 'New Post' })}>
  Create Post
</button>

Tilbagekald: onSuccess, onError, onSettled

Føj tilbagekaldsindstillinger til useMutation: onSuccess kører efter en vellykket mutation, onError kører ved fejl, og onSettled kører i begge tilfælde (ligesom finally).
useMutation({
  mutationFn: createPost,
  onSuccess: (data) => {
    console.log('Created:', data);
    navigate('/posts/' + data.id);
  },
  onError: (error) => {
    toast.error(error.message);
  },
})

Ugyldiggørelse af forespørgsler efter en mutation

Efter en vellykket mutation skal du ugyldiggøre relaterede forespørgsler, så React Query henter friske data igen. Brug queryClient.invalidateQueries i onSuccess.
import { useQueryClient } from '@tanstack/react-query';

const queryClient = useQueryClient();

const { mutate } = useMutation({
  mutationFn: createPost,
  onSuccess: () => {
    queryClient.invalidateQueries({ queryKey: ['posts'] });
  },
});

mutateAsync til await-syntaks

Brug `mutateAsync` i stedet for `mutate` for at afvente mutationen og håndtere den med try/catch.
const { mutateAsync } = useMutation({ mutationFn: createPost });

async function handleSubmit() {
  try {
    const post = await mutateAsync({ title: 'Draft' });
    navigate('/posts/' + post.id);
  } catch (err) {
    setError(err.message);
  }
}

Deaktivér indsendelse under en mutation

Brug `isPending` (eller `isLoading`) til at deaktivere indsendelsesknappen, mens mutationen er i gang.
const { mutate, isPending } = useMutation({ mutationFn: saveItem });

<button onClick={() => mutate(item)} disabled={isPending}>
  {isPending ? 'Saving...' : 'Save'}
</button>

Optimistiske opdateringer med onMutate

Brug onMutate til at opdatere cachen optimistisk, før serveren svarer. Rul tilbage i onError med den kontekst, som onMutate returnerer.
useMutation({
  mutationFn: likePost,
  onMutate: async (id) => {
    await queryClient.cancelQueries({ queryKey: ['posts'] });
    const prev = queryClient.getQueryData(['posts']);
    queryClient.setQueryData(['posts'], old => old.map(p =>
      p.id === id ? { ...p, likes: p.likes + 1 } : p));
    return { prev };
  },
  onError: (err, id, ctx) => queryClient.setQueryData(['posts'], ctx.prev),
  onSettled: () => queryClient.invalidateQueries({ queryKey: ['posts'] }),
})

Nulstilling af mutationstilstand

Kald `reset()` fra useMutation for at rydde mutationstilstanden (data, fejl og status). Det er nyttigt efter navigation væk fra siden eller når en formular ryddes.
const { mutate, isError, reset } = useMutation({ /* ... */ });

{isError && (
  <>
    <p>Error!</p>
    <button onClick={reset}>Try Again</button>
  </>
)}

Flere mutationer parallelt

Kald mutate flere gange parallelt — hver påkaldelse spores uafhængigt. Brug mutateAsync med Promise.all til parallelle mutationer.
await Promise.all([
  mutateAsync({ id: 1, title: 'First' }),
  mutateAsync({ id: 2, title: 'Second' }),
]);

Hurtigt tjek

Hvad er den anbefalede måde at sikre, at brugerfladen viser ajourførte data efter en vellykket mutation?
Besvar den i den interaktive lektion

Opsummering

useMutation giver adgang til mutate, isPending og livscyklus-tilbagekald. Brug onSuccess til at ugyldiggøre relaterede forespørgsler. Brug mutateAsync til forløb baseret på await. Brug onMutate/onError til optimistiske opdateringer med tilbagerulning.

Næste trin

Næste lektion: **Uendelig rulning og sideinddeling med useInfiniteQuery** — du henter sideinddelte data og indlæser flere sider uden afbrydelser.
Gratis at komme i gang

Lær React med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser
88
Lektioner
324
Start gratisSe hele kurset

Ofte stillede spørgsmål

Er lektionen “Mutationer med useMutation” gratis?

Ja — hele teksten til “Mutationer med useMutation” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af React Academy-kurset, skal du opgradere til CoddyKit PRO. React Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Mutationer med useMutation”?

Send data til API’er med useMutation, håndtér indlæsnings- og fejltilstande, og ugyldiggør forespørgsler ved succes. Du øver dig i React Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på React Academy?

Der kræves ingen tidligere erfaring. React Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.

Hvor lang tid tager lektionen “Mutationer med useMutation”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne React Academy-lektion?

Ja. Alle React Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

  1. Opsætning af React Query og QueryClient
  2. Caching, stale time og genhentning i baggrunden
  3. Mutationer med useMutation
  4. Uendelig scroll og paginering med useInfiniteQuery
← Tilbage til React Academy