React Academy · Oppitunti

Mutationit useMutationilla

Lähettäkää dataa API-rajapintoihin useMutationilla, käsitelkää lataus- ja virhetilat sekä mitätöikää kyselyt onnistumisen jälkeen.

Oppitunti 3/413 vaihetta

Mutationit useMutationilla on ilmainen React Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu React Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. React Academy-kurssilla on yhteensä 4 oppituntia.

Tervetuloa

Tällä oppitunnilla käytätte useMutation-hookia tietojen lähettämiseen API-rajapintoihin, käsittelette lataus- ja virhetilat sekä mitätöitte vanhentuneet kyselyt onnistuneiden muutosten jälkeen.

useMutationin perusteet

Kutsukaa useMutationia mutationFn-funktion kanssa. Se palauttaa mutate-funktion ja tilaa kuvaavia ominaisuuksia. Kutsukaa mutate()-funktiota käynnistääksenne toiminnon.

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()),
});

mutate-funktion kutsuminen

Kutsukaa tapahtumankäsittelijästä `mutate(variables)`-funktiota. Muuttujat välitetään mutationFn-funktiolle ensimmäisenä argumenttina.

<button onClick={() => mutate({ title: 'New Post' })}>
  Create Post
</button>

Takaisinkutsut: onSuccess, onError, onSettled

Lisätkää takaisinkutsuasetukset useMutationille: onSuccess suoritetaan onnistuneen muutoksen jälkeen, onError virheen yhteydessä ja onSettled molemmissa tapauksissa (kuten finally).

useMutation({
  mutationFn: createPost,
  onSuccess: (data) => {
    console.log('Created:', data);
    navigate('/posts/' + data.id);
  },
  onError: (error) => {
    toast.error(error.message);
  },
})

Kyselyjen mitätöinti muutoksen jälkeen

Mitätöikää onnistuneen muutoksen jälkeen siihen liittyvät kyselyt, jotta React Query hakee ajantasaiset tiedot uudelleen. Käyttäkää onSuccess-takaisinkutsussa queryClient.invalidateQueries-funktiota.

import { useQueryClient } from '@tanstack/react-query';

const queryClient = useQueryClient();

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

mutateAsync await-syntaksia varten

Käyttäkää `mutateAsync`-funktiota `mutate`-funktion sijaan, jos haluatte odottaa muutoksen valmistumista ja käsitellä sen try/catch-rakenteella.

const { mutateAsync } = useMutation({ mutationFn: createPost });

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

Lähetyksen poistaminen käytöstä muutoksen aikana

Käyttäkää `isPending`-arvoa (tai `isLoading`-arvoa) lähetyspainikkeen poistamiseen käytöstä muutoksen ollessa käynnissä.

const { mutate, isPending } = useMutation({ mutationFn: saveItem });

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

Optimistiset päivitykset onMutate-funktiolla

Käyttäkää onMutate-funktiota välimuistin optimistiseen päivittämiseen ennen palvelimen vastausta. Palauttakaa tila onError-funktiossa onMutaten palauttaman kontekstin avulla.

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'] }),
})

Muutoksen tilan nollaaminen

Kutsukaa useMutation-hookin palauttamaa `reset()`-funktiota tyhjentääksenne muutoksen tilan (tiedot, virheen ja tilan). Tämä on hyödyllistä esimerkiksi sivulta poistumisen tai lomakkeen tyhjentämisen jälkeen.

const { mutate, isError, reset } = useMutation({ /* ... */ });

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

Useita rinnakkaisia muutoksia

Kutsukaa mutate-funktiota useita kertoja rinnakkain — jokaista kutsua seurataan erikseen. Käyttäkää mutateAsync-funktiota yhdessä Promise.all-funktion kanssa rinnakkaisiin muutoksiin.

await Promise.all([
  mutateAsync({ id: 1, title: 'First' }),
  mutateAsync({ id: 2, title: 'Second' }),
]);

Pikatarkistus

Miten käyttöliittymän ajantasaiset tiedot kannattaa varmistaa onnistuneen muutoksen jälkeen?

Vastaa interaktiivisessa oppitunnissa

Kertaus

useMutation tarjoaa mutate-funktion, isPending-arvon ja elinkaaren takaisinkutsut. Mitätöikää liittyvät kyselyt onSuccess-funktiossa. Käyttäkää mutateAsync-funktiota await-pohjaisissa työnkuluissa. Käyttäkää onMutate- ja onError-funktioita optimistisiin päivityksiin ja niiden palauttamiseen.

Seuraavaksi

Seuraava oppitunti: **Loputon vieritys ja sivutus useInfiniteQuery-hookilla** — haette sivutettuja tietoja ja lataatte lisää sivuja saumattomasti.

Aloita maksutta

Opi React tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 88
Oppitunnit: 324

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Mutationit useMutationilla” ilmainen?

Kyllä – oppitunnin ”Mutationit useMutationilla” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko React Academy-kurssin, päivitä CoddyKit PROhon. React Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Mutationit useMutationilla”?

Lähettäkää dataa API-rajapintoihin useMutationilla, käsitelkää lataus- ja virhetilat sekä mitätöikää kyselyt onnistumisen jälkeen. Harjoittelet React Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni React Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin React Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/4.

Kuinka kauan ”Mutationit useMutationilla”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä React Academy-oppitunnilla?

Kyllä. Jokainen React Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

React Queryn ja QueryClientin käyttöönotto
Välimuisti, stale time ja taustalataus
Mutationit useMutationilla
Infinite scroll ja sivutus useInfiniteQuerylla

← Takaisin: React Academy