Optimististen päivitysten toteuttaminen
Oppikaa tarjoamaan käyttäjälle välitön käyttökokemus toteuttamalla optimistisia päivityksiä tRPC:llä ja asiakaspuolen välimuistilla.
Optimististen päivitysten toteuttaminen on ilmainen tRPC:n tyyppiturvalliset API:t päästä päähän-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu tRPC:n tyyppiturvalliset API:t päästä päähän-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. tRPC:n tyyppiturvalliset API:t päästä päähän-kurssilla on yhteensä 4 oppituntia.
Välitön palaute optimistisilla päivityksillä
Kuvitelkaa, että napsautatte julkaisun kohdalla painiketta "Tykkää". Odotattehan, että se näyttää heti tekstin "Tykkätty"? Tätä optimistiset päivitykset tarkoittavat!
Optimistiset päivitykset saavat sovelluksen tuntumaan erittäin nopealta ja reagoivalta. Ne parantavat käyttökokemusta antamalla välitöntä palautetta.
Mitä optimistiset päivitykset ovat?
Optimistinen päivitys tarkoittaa käyttöliittymän (UI) päivittämistä ennen kuin palvelin on vahvistanut muutoksen. Oletatte optimistisesti, että palvelinpyyntö onnistuu.
- Käyttöliittymän välitön päivitys: Käyttäjä näkee toimintansa vaikutuksen heti.
- Palvelinkutsu taustalla: Todellinen tietomuutos lähetetään taustajärjestelmään.
- Palautus virheen yhteydessä: Jos palvelin epäonnistuu, käyttöliittymä palautetaan aiempaan tilaansa.
Miksi niitä kannattaa käyttää tRPC:n kanssa?
tRPC yhdessä React Queryn (tai TanStack Queryn) kaltaisen asiakaspuolen välimuistikirjaston kanssa tarjoaa tehokkaat työkalut palvelintilan hallintaan ja optimististen päivitysten toteuttamiseen.
React Queryn useMutation-hook on tässä keskeinen. Sen avulla voitte määrittää takaisinkutsut mutaation aloitukselle, onnistumiselle ja epäonnistumiselle, mikä mahdollistaa käyttöliittymän tarkan hallinnan.
`onMutate`-takaisinkutsu
Kun käynnistätte mutaation, React Query kutsuu onMutate-funktiota ennen pyynnön lähettämistä palvelimelle. Tässä kohdassa optimistinen käyttöliittymäpäivitys tehdään.
Funktiossa onMutate yleensä:
- Peruutatte parhaillaan käynnissä olevat tietojen haut, jotka koskevat muutettavia tietoja.
- Tallennatte nykyiset tiedot tilannekuvana, jotta voitte tarvittaessa peruuttaa muutoksen.
- Päivitätte välimuistin uusilla, optimistisilla tiedoilla.
`onMutate`-funktion määrittäminen
Tarkastellaan yksinkertaistettua esimerkkiä julkaisusta tykkäämisestä. Päivitämme välimuistin optimistisesti käyttämällä funktiota queryClient.setQueryData.
import { trpc } from '../utils/trpc';
import { useQueryClient } from '@tanstack/react-query';
function PostLikeButton({ postId }: { postId: string }) {
const queryClient = useQueryClient();
const likeMutation = trpc.post.like.useMutation({
onMutate: async (newLike) => {
// 1. Cancel any outgoing refetches
await queryClient.cancelQueries(['post', postId]);
// 2. Snapshot the previous value
const previousPost = queryClient.getQueryData(['post', postId]);
// 3. Optimistically update to the new value
queryClient.setQueryData(['post', postId], (old: any) => {
if (old) {
return { ...old, likes: old.likes + 1, isLiked: true };
}
return old;
});
return { previousPost }; // Context for onError
},
});
return (
<button onClick={() => likeMutation.mutate({ postId })}>Like</button>
);
}`onError`-takaisinkutsu
Jos palvelimella suoritettava mutaatio epäonnistuu, käyttöliittymä on palautettava aiempaan tilaansa. Tämä hoidetaan onError-takaisinkutsussa.
Tässä käytätte onMutate-funktion palauttamaa context-oliota, joka sisältää muuttujan previousPost tilannekuvan, ja palautatte välimuistin alkuperäiseen arvoonsa.
`onError`-funktion toteuttaminen (peruutus)
Lisätään onError-käsittelijä useMutation-määritykseemme:
import { trpc } from '../utils/trpc';
import { useQueryClient } from '@tanstack/react-query';
function PostLikeButton({ postId }: { postId: string }) {
const queryClient = useQueryClient();
const likeMutation = trpc.post.like.useMutation({
onMutate: async (newLike) => {
// ... (same as before)
const previousPost = queryClient.getQueryData(['post', postId]);
queryClient.setQueryData(['post', postId], (old: any) => {
if (old) return { ...old, likes: old.likes + 1, isLiked: true };
return old;
});
return { previousPost };
},
onError: (err, newLike, context) => {
// Rollback the cache to the previousPost
queryClient.setQueryData(['post', postId], context?.previousPost);
// Optionally show an error toast
console.error("Failed to like post: ", err.message);
},
});
return (
<button onClick={() => likeMutation.mutate({ postId })}>Like</button>
);
}`onSuccess`-takaisinkutsu
Kun palvelin on käsitellyt mutaation onnistuneesti, onSuccess-takaisinkutsu käynnistyy. Tässä vaiheessa optimistinen käyttöliittymäpäivitys on oikea, mutta tietojen yhdenmukaisuus on silti varmistettava.
Paras käytäntö on tässä mitätöidä asiaankuuluvat kyselyt. Tämä kehottaa React Querya hakemaan tiedot uudelleen taustalla ja varmistaa, että asiakaspuolen välimuisti on täysin synkronoitu palvelimen kanssa.
Optimistisen työnkulun viimeistely
Tässä on koko useMutation-määritys, jossa onSuccess mitätöi kyselyt ja hakee tiedot uudelleen onnistuneen palvelinvastauksen jälkeen:
import { trpc } from '../utils/trpc';
import { useQueryClient } from '@tanstack/react-query';
function PostLikeButton({ postId }: { postId: string }) {
const queryClient = useQueryClient();
const likeMutation = trpc.post.like.useMutation({
onMutate: async (newLike) => {
await queryClient.cancelQueries(['post', postId]);
const previousPost = queryClient.getQueryData(['post', postId]);
queryClient.setQueryData(['post', postId], (old: any) => {
if (old) return { ...old, likes: old.likes + 1, isLiked: true };
return old;
});
return { previousPost };
},
onError: (err, newLike, context) => {
queryClient.setQueryData(['post', postId], context?.previousPost);
console.error("Failed to like post: ", err.message);
},
onSuccess: () => {
// Invalidate and refetch the post data to ensure consistency
queryClient.invalidateQueries(['post', postId]);
},
});
return (
<button onClick={() => likeMutation.mutate({ postId })}>Like</button>
);
}Hyödyt ja huomioitavaa
Optimistiset päivitykset parantavat käyttökokemusta huomattavasti, mutta lisäävät monimutkaisuutta:
- Hyöty: Käyttöliittymä antaa välitöntä palautetta ja suorituskyky koetaan paremmaksi.
- Hyöty: Latausilmaisimia ja odotusaikoja tarvitaan vähemmän.
- Haitta: Virheiden huolellinen peruutuslogiikka on välttämätön.
- Haitta: Toteutus voi olla monimutkainen toiminnoissa, jotka riippuvat palvelimen luomista tunnisteista tai monimutkaisista tietojen muunnoksista.
Käyttäkää niitä harkiten, erityisesti toiminnoissa, joissa välitön palaute on tärkeää ja ristiriidat harvinaisia.
Testaa ymmärryksesi
Ajatellaan optimistista päivitystä, jossa tuote lisätään ostoskoriin. Mitkä seuraavista toimista yleensä suoritetaan onMutate-takaisinkutsussa?
Kertaus: optimistiset päivitykset
Tässä oppitunnissa tutustuimme optimistisiin päivityksiin, jotka ovat tehokas tapa parantaa käyttökokemusta tarjoamalla välitöntä palautetta.
- Opimme, kuinka
onMutate-funktiota käytetään käyttöliittymän optimistiseen päivittämiseen ja mahdollisiin peruutuksiin valmistautumiseen. - Näimme, kuinka
onErrorpalauttaa käyttöliittymän aiempaan tilaansa palvelinpyynnön epäonnistuessa. - Lopuksi käsittelimme, kuinka
onSuccessvarmistaa tietojen yhdenmukaisuuden mitätöimällä ja hakemalla tiedot uudelleen onnistuneen palvelinvastauksen jälkeen.
Optimististen päivitysten hallitseminen auttaa rakentamaan erittäin reagoivia ja käyttäjäystävällisiä tRPC-sovelluksia!
Opi tRPC:n tyyppiturvalliset API:t päästä päähän 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
- 10
- Oppitunnit
- 40
Usein kysytyt kysymykset
Onko oppitunti ”Optimististen päivitysten toteuttaminen” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa tRPC:n tyyppiturvalliset API:t päästä päähän-oppimispolun 3 oppituntia, myös oppitunnin “Optimististen päivitysten toteuttaminen”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. tRPC:n tyyppiturvalliset API:t päästä päähän-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Optimististen päivitysten toteuttaminen”?
Oppikaa tarjoamaan käyttäjälle välitön käyttökokemus toteuttamalla optimistisia päivityksiä tRPC:llä ja asiakaspuolen välimuistilla. Harjoittelet tRPC:n tyyppiturvalliset API:t päästä päähän-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni tRPC:n tyyppiturvalliset API:t päästä päähän-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin tRPC:n tyyppiturvalliset API:t päästä päähän-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.
Kuinka kauan ”Optimististen päivitysten toteuttaminen”-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ä tRPC:n tyyppiturvalliset API:t päästä päähän-oppitunnilla?
Kyllä. Jokainen tRPC:n tyyppiturvalliset API:t päästä päähän-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
- Pyyntöjen tehokas eräajo
- Optimististen päivitysten toteuttaminen
- Tiedostojen lataus tRPC:llä
- Rajattomat kyselyt ja cursoriin perustuva sivutus