API tRPC Selamat Jenis dari Hujung ke Hujung · Pelajaran

Melaksanakan Kemas Kini Optimistik

Pelajari cara menyediakan pengalaman pengguna yang segera dengan melaksanakan kemas kini optimistik menggunakan tRPC dan cache pada bahagian pelanggan.

Pelajaran 2 daripada 412 langkah

Melaksanakan Kemas Kini Optimistik ialah pelajaran API tRPC Selamat Jenis dari Hujung ke Hujung percuma di CoddyKit. Ini ialah pelajaran 2 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran API tRPC Selamat Jenis dari Hujung ke Hujung, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus API tRPC Selamat Jenis dari Hujung ke Hujung merangkumi sejumlah 4 pelajaran.

Maklum Balas Segera dengan Kemas Kini Optimistik

Bayangkan anda mengklik 'Suka' pada siaran. Anda menjangkakan ia memaparkan 'Disukai' serta-merta, bukan? Itulah keajaiban Kemas Kini Optimistik!

Kemas kini optimistik menjadikan aplikasi anda terasa sangat pantas dan responsif. Kemas kini ini meningkatkan pengalaman pengguna dengan memberikan maklum balas segera.

Apakah Kemas Kini Optimistik?

Kemas kini optimistik bermaksud mengemas kini antara muka pengguna (UI) sebelum pelayan mengesahkan perubahan tersebut. Anda menganggap secara 'optimistik' bahawa permintaan kepada pelayan akan berjaya.

Kemas kini UI serta-merta: Pengguna melihat tindakannya tercermin dengan segera.
Panggilan pelayan di latar belakang: Perubahan data sebenar dihantar kepada bahagian belakang.
Pembalikan apabila berlaku ralat: Jika pelayan gagal, UI kembali kepada keadaan sebelumnya.

Mengapa Menggunakannya dengan tRPC?

tRPC, yang digabungkan dengan pustaka cache pada klien seperti React Query (atau TanStack Query), menyediakan alat yang berkuasa untuk mengurus keadaan pelayan dan melaksanakan kemas kini optimistik.

Cangkuk useMutation React Query merupakan bahagian penting dalam hal ini. Cangkuk ini membolehkan anda mentakrifkan panggilan balik apabila mutasi bermula, berjaya atau gagal, sekali gus membolehkan kawalan tepat terhadap UI.

Panggilan Balik `onMutate`

Apabila anda mencetuskan mutasi, React Query memanggil fungsi onMutate sebelum menghantar permintaan kepada pelayan. Di sinilah anda melakukan kemas kini UI optimistik.

Dalam onMutate, anda biasanya akan:

Membatalkan sebarang pengambilan data yang sedang berjalan untuk data yang bakal anda ubah.
Menyimpan salinan keadaan data semasa supaya anda boleh membuat pembalikan jika perlu.
Mengemas kini cache dengan data optimistik yang baharu.

Menyediakan `onMutate`

Mari lihat contoh ringkas untuk 'menyukai' siaran. Kita akan menggunakan queryClient.setQueryData untuk mengemas kini cache secara optimistik.

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

Panggilan Balik `onError`

Jika mutasi pelayan gagal, anda perlu mengembalikan UI kepada keadaan sebelumnya. Hal ini dikendalikan dalam panggilan balik onError.

Di sini, anda menggunakan objek context yang dikembalikan oleh onMutate (yang menyimpan salinan keadaan previousPost) untuk memulihkan cache kepada nilai asalnya.

Melaksanakan `onError` (Pembalikan)

Menambahkan pengendali onError kepada persediaan useMutation kita:

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

Panggilan Balik `onSuccess`

Setelah pelayan berjaya memproses mutasi, panggilan balik onSuccess dicetuskan. Pada ketika ini, kemas kini UI optimistik anda adalah betul, tetapi anda masih perlu memastikan ketekalan data.

Amalan terbaik di sini ialah membatalkan kesahan pertanyaan yang berkaitan. Ini memberitahu React Query supaya mendapatkan semula data di latar belakang, sekali gus memastikan cache pada klien anda benar-benar segerak dengan pelayan.

Melengkapkan Aliran Optimistik

Berikut ialah useMutation lengkap dengan onSuccess untuk membatalkan kesahan dan mendapatkan semula data selepas respons pelayan yang berjaya:

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

Manfaat dan Pertimbangan

Kemas kini optimistik sangat baik untuk pengalaman pengguna, tetapi menambah kerumitan:

Kelebihan: Maklum balas UI serta-merta dan peningkatan prestasi yang dirasakan.
Kelebihan: Mengurangkan pemutar pemuatan dan masa menunggu.
Kekurangan: Memerlukan logik pembalikan yang teliti apabila berlaku ralat.
Kekurangan: Boleh menjadi rumit bagi operasi yang bergantung pada ID yang dijana pelayan atau transformasi data yang kompleks.

Gunakannya dengan pertimbangan, terutamanya bagi tindakan yang memerlukan maklum balas segera dan jarang mengalami konflik.

Uji Pemahaman Anda

Pertimbangkan kemas kini optimistik untuk menambahkan item ke dalam troli beli-belah. Antara tindakan berikut, yang manakah biasanya dilakukan dalam panggilan balik onMutate?

Jawab dalam pelajaran interaktif

Ulang Kaji: Kemas Kini Optimistik

Dalam pelajaran ini, kita meneroka kemas kini optimistik, iaitu teknik berkuasa untuk meningkatkan pengalaman pengguna dengan memberikan maklum balas segera.

Kita mempelajari cara onMutate digunakan untuk mengemas kini UI secara optimistik dan bersedia untuk kemungkinan pembalikan.
Kita melihat cara onError mengendalikan pengembalian UI kepada keadaan sebelumnya jika permintaan pelayan gagal.
Akhir sekali, kita membincangkan cara onSuccess memastikan ketekalan data dengan membatalkan kesahan dan mendapatkan semula data selepas respons pelayan yang berjaya.

Penguasaan kemas kini optimistik membantu anda membina aplikasi tRPC yang sangat responsif dan mesra pengguna!

Percuma untuk bermula

Pelajari API tRPC Selamat Jenis dari Hujung ke Hujung dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 10
Pelajaran: 40

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Melaksanakan Kemas Kini Optimistik” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran API tRPC Selamat Jenis dari Hujung ke Hujung, termasuk “Melaksanakan Kemas Kini Optimistik”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus API tRPC Selamat Jenis dari Hujung ke Hujung merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Melaksanakan Kemas Kini Optimistik”?

Pelajari cara menyediakan pengalaman pengguna yang segera dengan melaksanakan kemas kini optimistik menggunakan tRPC dan cache pada bahagian pelanggan. Anda berlatih API tRPC Selamat Jenis dari Hujung ke Hujung menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan API tRPC Selamat Jenis dari Hujung ke Hujung?

Tiada pengalaman terdahulu diperlukan. Pembelajaran API tRPC Selamat Jenis dari Hujung ke Hujung di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 4.

Berapa lamakah pelajaran “Melaksanakan Kemas Kini Optimistik” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran API tRPC Selamat Jenis dari Hujung ke Hujung ini?

Ya. Setiap pelajaran API tRPC Selamat Jenis dari Hujung ke Hujung menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

Permintaan Kelompok yang Cekap
Melaksanakan Kemas Kini Optimistik
Muat Naik Fail dengan tRPC
Pertanyaan Tanpa Had dan Penomboran Berasaskan Kursor

← Kembali ke API tRPC Selamat Jenis dari Hujung ke Hujung