PricingLoginStart free
React Academy · Lektion

Mutationer med useMutation

Skicka data till API:er med useMutation, hantera laddnings- och feltillstånd och ogiltigförklara queries vid lyckat resultat.

Lektion 3 av 413 steg

Mutationer med useMutation är en gratis lektion i React Academy på CoddyKit. Detta är lektion 3 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för React Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i React Academy innehåller totalt 4 lektioner.

Välkommen

I den här lektionen kommer du att använda useMutation för att skicka data till API:er, hantera laddnings- och feltillstånd samt invalidera inaktuella frågor efter lyckade mutationer.

Grunderna i useMutation

Anropa useMutation med en mutationFn. Den returnerar en mutate-funktion och statusegenskaper. Anropa mutate() för att utlösa operationen.
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()),
});

Anropa mutate

Anropa `mutate(variables)` från en händelsehanterare. Variablerna skickas till mutationFn som det första argumentet.
<button onClick={() => mutate({ title: 'New Post' })}>
  Create Post
</button>

Callback-funktioner: onSuccess, onError, onSettled

Lägg till callback-alternativ i useMutation: onSuccess körs efter en lyckad mutation, onError körs vid fel och onSettled körs i båda fallen (ungefär som finally).
useMutation({
  mutationFn: createPost,
  onSuccess: (data) => {
    console.log('Created:', data);
    navigate('/posts/' + data.id);
  },
  onError: (error) => {
    toast.error(error.message);
  },
})

Invalidera frågor efter en mutation

Efter en lyckad mutation invaliderar du relaterade frågor så att React Query hämtar färska data på nytt. Använd queryClient.invalidateQueries i onSuccess.
import { useQueryClient } from '@tanstack/react-query';

const queryClient = useQueryClient();

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

mutateAsync för await-syntax

Använd `mutateAsync` i stället för `mutate` för att invänta mutationen och hantera 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);
  }
}

Inaktivera skickaknappen under en mutation

Använd `isPending` (eller `isLoading`) för att inaktivera skickaknappen medan mutationen pågår.
const { mutate, isPending } = useMutation({ mutationFn: saveItem });

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

Optimistiska uppdateringar med onMutate

Använd onMutate för att uppdatera cachen optimistiskt innan servern svarar. Återställ ändringen i onError med det context som returneras av onMutate.
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'] }),
})

Återställa mutationens tillstånd

Anropa `reset()` från useMutation för att rensa mutationens tillstånd (data, fel och status). Det är användbart efter att du har navigerat bort eller rensat ett formulär.
const { mutate, isError, reset } = useMutation({ /* ... */ });

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

Flera parallella mutationer

Anropa mutate flera gånger parallellt — varje anrop spåras separat. Använd mutateAsync med Promise.all för parallella mutationer.
await Promise.all([
  mutateAsync({ id: 1, title: 'First' }),
  mutateAsync({ id: 2, title: 'Second' }),
]);

Snabb kontroll

Vad är det rekommenderade sättet att säkerställa att UI:t visar aktuella data efter en lyckad mutation?
Besvara frågan i den interaktiva lektionen

Sammanfattning

useMutation tillhandahåller mutate, isPending och livscykel-callbacks. Använd onSuccess för att invalidera relaterade frågor. Använd mutateAsync i flöden som bygger på await. Använd onMutate/onError för optimistiska uppdateringar med återställning.

Härnäst

Nästa lektion: **Oändlig scrollning och paginering med useInfiniteQuery** — du kommer att hämta paginerade data och läsa in fler sidor utan avbrott.
Gratis att börja

Lär dig React med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser
88
Lektioner
324
Börja lära dig gratisVisa hela kursen

Vanliga frågor

Är lektionen ”Mutationer med useMutation” gratis?

Ja – hela texten till ”Mutationer med useMutation” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i React Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i React Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Mutationer med useMutation”?

Skicka data till API:er med useMutation, hantera laddnings- och feltillstånd och ogiltigförklara queries vid lyckat resultat. Ni övar på React Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig React Academy?

Du behöver inga förkunskaper. Utbildningen i React Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.

Hur lång tid tar lektionen ”Mutationer med useMutation”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här React Academy-lektionen?

Ja. Varje React Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

  1. Konfigurera React Query och QueryClient
  2. Cachning, stale time och bakgrundshämtning
  3. Mutationer med useMutation
  4. Oändlig scrollning och paginering med useInfiniteQuery
← Tillbaka till React Academy