Query, Mutasi, dan Subscription

Rangkai .input(zodSchema).query(async ({ input, ctx }) => ...) ke publicProcedure. Penangan menerima masukan yang telah divalidasi dan konteks permintaan. Kembalikan nilai apa pun yang dapat diserialisasikan: objek, larik, atau nilai primitif.

Tipe hasil disimpulkan secara otomatis dan menjadi tipe data kait useQuery yang sesuai pada klien.

trpc.post.getById.useQuery({ id: '1' }) memanggil prosedur getById dalam router post. Kait ini mengembalikan objek hasil React Query yang sudah dikenal: { data, isLoading, isError, refetch }.

Objek masukan memiliki tipe statis: memberikan { id: 123 } ketika skema mengharapkan string akan menghasilkan kesalahan TypeScript yang ditangkap pada waktu pengembangan.

Gunakan .input(zodSchema).mutation(async ({ input, ctx }) => ...) untuk operasi penulisan di sisi server: membuat, memperbarui, atau menghapus data. Mutasi dipanggil secara eksplisit, bukan dijalankan saat komponen dipasang.

Penangan mutasi memiliki akses ke seluruh konteks permintaan (termasuk sesi dari NextAuth) melalui ctx.

const { mutate, isLoading, error } = trpc.post.create.useMutation(). Panggil mutate({ title: 'New', content: '...' }) untuk memicu mutasi. Seperti useMutation milik React Query, mutasi ini tidak dijalankan saat komponen dipasang.

Teruskan panggilan balik onSuccess dan onError ke opsi useMutation untuk efek samping setelah mutasi.

Untuk menyegarkan data kueri setelah mutasi berhasil, gunakan kait utilitas tRPC: const utils = trpc.useUtils(). Di dalam onSuccess, panggil utils.post.getAll.invalidate() untuk memicu pengambilan ulang daftar postingan.

Ini adalah padanan tRPC untuk queryClient.invalidateQueries() milik React Query dan mengikuti pola usang-lalu-ambil-ulang yang sama.

tRPC menggunakan Zod untuk validasi masukan secara bawaan. Skema Zod dijalankan di server pada waktu proses dan menolak masukan yang tidak valid sebelum mencapai penangan Anda. Skema yang sama menyediakan tipe TypeScript untuk klien.

Peran ganda ini (validasi saat waktu proses + tipe TypeScript) menghilangkan duplikasi: Anda mendefinisikan kontrak sekali dalam Zod dan mendapatkan kedua jaminan keamanan tersebut secara gratis.

Secara bawaan, tRPC menggunakan httpBatchLink yang mengelompokkan beberapa permintaan tRPC serentak menjadi satu permintaan HTTP. Beberapa panggilan useQuery dalam satu siklus render komponen dikirim dan diselesaikan secara bersamaan.

Hal ini secara signifikan mengurangi beban jaringan dibandingkan permintaan HTTP terpisah untuk setiap kueri pada halaman dengan banyak kebutuhan data.

Definisikan prosedur langganan: publicProcedure.subscription(async function*() { while (true) { yield await nextEvent(); } }). Langganan menggunakan generator asinkron dan memerlukan transportasi WebSocket.

Langganan ideal untuk fitur waktu nyata: notifikasi langsung, kursor penyuntingan kolaboratif, atau respons AI yang dialirkan.

Ganti httpBatchLink dengan gabungan httpBatchLink dan wsLink menggunakan splitLink: arahkan langganan ke wsLink serta kueri/mutasi ke httpBatchLink. Buat klien WebSocket dengan createWSClient({ url: 'ws://localhost:3000' }).

Transportasi hibrida ini berarti sebagian besar permintaan menggunakan pengelompokan HTTP yang efisien, sedangkan langganan menggunakan koneksi WebSocket yang persisten.

trpc.notifications.onNew.useSubscription(undefined, { onData: (notification) => addToList(notification), onError: console.error }) berlangganan pada prosedur tersebut. Panggilan balik onData dipanggil untuk setiap nilai yang dihasilkan.

Langganan secara otomatis dibuat kembali jika WebSocket terputus lalu tersambung kembali.

Halaman daftar waktu nyata dapat menggunakan kueri untuk memuat daftar awal, mutasi untuk menambahkan item, dan langganan untuk menerima penambahan langsung dari pengguna lain. Ketiganya memiliki tipe yang sama berdasarkan AppRouter dan dapat digabungkan secara alami.

Strategi pembatalan validitas tembolok bergantung pada pilihan Anda: pengambilan ulang penuh (invalidate setelah mutasi) atau pembaruan tembolok (utils.post.getAll.setData).

Metode utilitas tRPC apa yang memicu pengambilan ulang kueri setelah mutasi berhasil?

Definisikan kueri dengan .query() dan mutasi dengan .mutation(), yang keduanya divalidasi oleh skema Zod. Di klien, gunakan trpc.router.procedure.useQuery() dan useMutation(). Batalkan validitas kueri setelah mutasi dengan utils.procedure.invalidate(). Langganan menggunakan generator asinkron dan memerlukan wsLink untuk transportasi WebSocket.

Secara bawaan, httpBatchLink mengelompokkan kueri serentak menjadi satu permintaan HTTP.