Implementering av optimistiske oppdateringer
Lær å gi en umiddelbar brukeropplevelse ved å implementere optimistiske oppdateringer med tRPC og en klientbufring.
Implementering av optimistiske oppdateringer er en gratis leksjon i Typesikre API-er fra frontend til backend med tRPC på CoddyKit. Dette er leksjon 2 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Typesikre API-er fra frontend til backend med tRPC, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Typesikre API-er fra frontend til backend med tRPC inneholder totalt 4 leksjoner.
Umiddelbar tilbakemelding med optimistiske oppdateringer
Forestill Dem at De klikker på «Lik» på et innlegg. De forventer at det umiddelbart skal vises «Likt», ikke sant? Det er magien ved optimistiske oppdateringer!
Optimistiske oppdateringer får appen Deres til å føles utrolig rask og responsiv. De forbedrer brukeropplevelsen ved å gi umiddelbar tilbakemelding.
Hva er optimistiske oppdateringer?
En optimistisk oppdatering innebærer at brukergrensesnittet (UI-et) oppdateres før serveren har bekreftet endringen. De antar «optimistisk» at serverforespørselen vil lykkes.
- Umiddelbar UI-oppdatering: Brukeren ser handlingen sin gjenspeilet med én gang.
- Serverkall i bakgrunnen: Den faktiske dataendringen sendes til backend.
- Tilbakerulling ved feil: Hvis serveren mislykkes, går UI-et tilbake til den forrige tilstanden.
Hvorfor bruke dem med tRPC?
tRPC kombinert med et klientbasert cachebibliotek som React Query (eller TanStack Query) gir kraftige verktøy for håndtering av servertilstand og implementering av optimistiske oppdateringer.
React Querys useMutation-hook er sentral i dette. Den lar Dem definere tilbakekallinger for når en mutasjon starter, lykkes eller mislykkes, slik at De får presis kontroll over UI-et.
Tilbakekallet `onMutate`
Når De utløser en mutasjon, kaller React Query opp funksjonen onMutate før forespørselen sendes til serveren. Det er her De utfører den optimistiske UI-oppdateringen.
Inne i onMutate gjør De vanligvis følgende:
- Avbryter eventuelle pågående hentingoperasjoner for dataene De skal endre.
- Tar et øyeblikksbilde av de gjeldende dataene, slik at De kan rulle tilbake ved behov.
- Oppdaterer cachen med de nye, optimistiske dataene.
Sette opp `onMutate`
La oss se på et forenklet eksempel på å «like» et innlegg. Vi bruker queryClient.setQueryData til å oppdatere cachen optimistisk.
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>
);
}Tilbakekallet `onError`
Hvis servermutasjonen mislykkes, må De føre UI-et tilbake til den forrige tilstanden. Dette håndteres i tilbakekallet onError.
Her bruker De context-objektet som returneres fra onMutate (og som inneholder øyeblikksbildet av previousPost) til å gjenopprette cachen til den opprinnelige verdien.
Implementere `onError` (tilbakerulling)
Legge til onError-håndteringen i oppsettet av useMutation:
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>
);
}Tilbakekallet `onSuccess`
Når serveren har behandlet mutasjonen, utløses tilbakekallet onSuccess. På dette tidspunktet er den optimistiske UI-oppdateringen Deres korrekt, men De bør likevel sørge for at dataene er konsistente.
Det anbefales å invaliderer relevante spørringer. Dette ber React Query hente dataene på nytt i bakgrunnen, slik at cachen på klientsiden er helt synkronisert med serveren.
Fullføre den optimistiske flyten
Her er hele useMutation med onSuccess for å invalidere og hente data på nytt etter et vellykket svar fra serveren:
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>
);
}Fordeler og hensyn
Optimistiske oppdateringer er fantastiske for brukeropplevelsen, men de gjør løsningen mer kompleks:
- Fordel: Umiddelbar tilbakemelding i UI-et og en opplevd ytelsesforbedring.
- Fordel: Færre lastespinnere og kortere ventetid.
- Ulempe: Krever nøye logikk for tilbakerulling ved feil.
- Ulempe: Kan være komplekst for operasjoner som avhenger av servergenererte ID-er eller komplekse datatransformasjoner.
Bruk dem med omtanke, særlig for handlinger der umiddelbar tilbakemelding er avgjørende og konflikter er sjeldne.
Test forståelsen Deres
Tenk på en optimistisk oppdatering for å legge et element i en handlekurv. Hvilke av følgende handlinger utføres vanligvis i tilbakekallet onMutate?
Oppsummering: Optimistiske oppdateringer
I denne leksjonen utforsket vi optimistiske oppdateringer, en kraftig teknikk for å forbedre brukeropplevelsen ved å gi umiddelbar tilbakemelding.
- Vi lærte hvordan
onMutatebrukes til å oppdatere UI-et optimistisk og forberede en eventuell tilbakerulling. - Vi så hvordan
onErrorhåndterer å føre UI-et tilbake til den forrige tilstanden hvis serverforespørselen mislykkes. - Til slutt gikk vi gjennom hvordan
onSuccesssikrer datakonsistens ved å invalidere og hente data på nytt etter et vellykket svar fra serveren.
Når De behersker optimistiske oppdateringer, kan De bygge svært responsive og brukervennlige tRPC-applikasjoner!
Lær deg Typesikre API-er fra frontend til backend med tRPC med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 10
- Leksjoner
- 40
Ofte stilte spørsmål
Er leksjonen «Implementering av optimistiske oppdateringer» gratis?
Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Typesikre API-er fra frontend til backend med tRPC, inkludert «Implementering av optimistiske oppdateringer», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i Typesikre API-er fra frontend til backend med tRPC inneholder totalt 4 leksjoner.
Hva lærer jeg i «Implementering av optimistiske oppdateringer»?
Lær å gi en umiddelbar brukeropplevelse ved å implementere optimistiske oppdateringer med tRPC og en klientbufring. Du øver på Typesikre API-er fra frontend til backend med tRPC med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med Typesikre API-er fra frontend til backend med tRPC?
Ingen tidligere erfaring er nødvendig. Typesikre API-er fra frontend til backend med tRPC på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 2 av 4.
Hvor lang tid tar leksjonen «Implementering av optimistiske oppdateringer»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne Typesikre API-er fra frontend til backend med tRPC-leksjonen?
Ja. Alle Typesikre API-er fra frontend til backend med tRPC-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Effektiv bunting av forespørsler
- Implementering av optimistiske oppdateringer
- Filopplastinger med tRPC
- Uendelige spørringer og markørbasert paginering