tRPC End-to-End Type Safe APIs · Lekcja

Implementacja optymistycznych aktualizacji

Nauczą się Państwo zapewniać natychmiastową reakcję aplikacji dzięki implementacji optymistycznych aktualizacji z tRPC i pamięcią podręczną po stronie klienta.

Lekcja 2 z 412 kroki

Implementacja optymistycznych aktualizacji to bezpłatna lekcja tRPC End-to-End Type Safe APIs na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej tRPC End-to-End Type Safe APIs, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs tRPC End-to-End Type Safe APIs zawiera 4 lekcji w sumie.

Części tej lekcji nie zostały jeszcze przetłumaczone i są wyświetlane po angielsku.

Instant Feedback with Optimistic Updates

Imagine clicking 'Like' on a post. You expect it to show 'Liked' instantly, right? That's the magic of Optimistic Updates!

Optimistic updates make your app feel incredibly fast and responsive. They improve the user experience by giving immediate feedback.

What Are Optimistic Updates?

An optimistic update means updating the user interface (UI) before the server has confirmed the change. You 'optimistically' assume the server request will succeed.

Instant UI update: The user sees their action immediately reflected.
Background server call: The actual data change is sent to the backend.
Rollback on error: If the server fails, the UI reverts to its previous state.

Why Use Them with tRPC?

tRPC, combined with a client-side caching library like React Query (or TanStack Query), provides powerful tools for managing server state and implementing optimistic updates.

React Query's useMutation hook is central to this. It allows you to define callbacks for when a mutation starts, succeeds, or fails, enabling precise control over the UI.

The `onMutate` Callback

When you trigger a mutation, React Query calls the onMutate function before sending the request to the server. This is where you perform the optimistic UI update.

Inside onMutate, you typically:

Cancel any ongoing fetches for the data you're about to change.
Snapshot the current data so you can roll back if needed.
Update the cache with the new, optimistic data.

Setting Up `onMutate`

Let's look at a simplified example for 'liking' a post. We'll use queryClient.setQueryData to update the cache optimistically.

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

The `onError` Callback

If the server mutation fails, you need to revert the UI to its previous state. This is handled in the onError callback.

Here, you use the context object returned from onMutate (which holds your snapshot of previousPost) to restore the cache to its original value.

Implementing `onError` (Rollback)

Adding the onError handler to our useMutation setup:

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

The `onSuccess` Callback

Once the server successfully processes the mutation, the onSuccess callback is triggered. At this point, your optimistic UI update is correct, but you still want to ensure data consistency.

The best practice here is to invalidate relevant queries. This tells React Query to refetch the data in the background, ensuring your client-side cache is perfectly in sync with the server.

Completing the Optimistic Flow

Here's the full useMutation with onSuccess to invalidate and refetch data after a successful server response:

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

Benefits and Considerations

Optimistic updates are fantastic for user experience, but they add complexity:

Pro: Instant UI feedback, perceived performance boost.
Pro: Reduces loading spinners and waiting times.
Con: Requires careful rollback logic for errors.
Con: Can be complex for operations that depend on server-generated IDs or complex data transformations.

Use them thoughtfully, especially for actions where immediate feedback is critical and conflicts are rare.

Check Your Understanding

Consider an optimistic update for adding an item to a shopping cart. Which of the following actions are typically performed within the onMutate callback?

Odpowiedz w interaktywnej lekcji

Recap: Optimistic Updates

In this lesson, we explored optimistic updates, a powerful technique to enhance user experience by providing instant feedback.

We learned how onMutate is used to optimistically update the UI and prepare for potential rollbacks.
We saw how onError handles reverting the UI to its previous state if the server request fails.
Finally, we covered how onSuccess ensures data consistency by invalidating and refetching data after a successful server response.

Mastering optimistic updates helps you build highly responsive and user-friendly tRPC applications!

Bezpłatny start

Ucz się tRPC End-to-End Type Safe APIs dzięki korepetycjom AI — za darmo

Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.

Kursy: 10
Lekcje: 40

Zacznij naukę bezpłatnie Wyświetl pełny kurs

Często zadawane pytania

Czy lekcja „Implementacja optymistycznych aktualizacji” jest bezpłatna?

Tak — pełny tekst „Implementacja optymistycznych aktualizacji” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu tRPC End-to-End Type Safe APIs, przejdź na CoddyKit PRO. Kurs tRPC End-to-End Type Safe APIs zawiera 4 lekcji w sumie.

Co nauczysz się w „Implementacja optymistycznych aktualizacji”?

Nauczą się Państwo zapewniać natychmiastową reakcję aplikacji dzięki implementacji optymistycznych aktualizacji z tRPC i pamięcią podręczną po stronie klienta. Ćwiczysz tRPC End-to-End Type Safe APIs z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć tRPC End-to-End Type Safe APIs?

Nie wymagamy żadnego doświadczenia. tRPC End-to-End Type Safe APIs w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.

Ile czasu zajmuje lekcja „Implementacja optymistycznych aktualizacji”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji tRPC End-to-End Type Safe APIs?

Tak. Każda lekcja tRPC End-to-End Type Safe APIs zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

Wydajne grupowanie żądań
Implementacja optymistycznych aktualizacji
Przesyłanie plików z tRPC
Zapytania nieskończone i stronicowanie oparte na kursorze

← Powrót do tRPC End-to-End Type Safe APIs