Pertanyaan, Mutasi dan Langganan

Rantaikan .input(zodSchema).query(async ({ input, ctx }) => ...) pada publicProcedure. Pengendali menerima masukan yang telah disahkan dan konteks permintaan. Pulangkan sebarang nilai yang boleh disiri: objek, tatasusunan atau primitif.

Jenis pulangan disimpulkan secara automatik dan menjadi jenis data bagi cangkuk useQuery yang sepadan pada klien.

trpc.post.getById.useQuery({ id: '1' }) memanggil prosedur getById dalam penghala post. Cangkuk ini memulangkan objek hasil React Query yang biasa: { data, isLoading, isError, refetch }.

Objek masukan ditaip secara statik: memberikan { id: 123 } apabila skema menjangkakan rentetan menghasilkan ralat TypeScript yang dikesan pada masa pembangunan.

Gunakan .input(zodSchema).mutation(async ({ input, ctx }) => ...) untuk operasi penulisan pada pelayan: mencipta, mengemas kini atau memadam data. Mutasi dipanggil secara eksplisit dan bukannya dijalankan secara automatik apabila komponen dipasang.

Pengendali mutasi mempunyai akses kepada konteks permintaan penuh (termasuk sesi daripada NextAuth) melalui ctx.

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

Hantar panggil balik onSuccess dan onError kepada pilihan useMutation untuk melaksanakan kesan sampingan selepas mutasi.

Untuk memuat semula data pertanyaan selepas mutasi berjaya, gunakan cangkuk utiliti tRPC: const utils = trpc.useUtils(). Dalam onSuccess, panggil utils.post.getAll.invalidate() untuk mencetuskan pengambilan semula senarai kiriman.

Ini ialah padanan tRPC bagi queryClient.invalidateQueries() React Query dan mengikut corak lapuk-dan-muat-semula yang sama.

tRPC menggunakan Zod untuk pengesahan masukan secara lalai. Skema Zod dijalankan pada pelayan semasa masa jalan dan menolak masukan yang tidak sah sebelum masukan itu sampai kepada pengendali anda. Skema yang sama menyediakan jenis TypeScript untuk klien.

Peranan dwi ini (pengesahan masa jalan + jenis TypeScript) menghapuskan penduaan: anda mentakrifkan kontrak sekali sahaja dalam Zod dan memperoleh kedua-dua jaminan keselamatan secara percuma.

Secara lalai, tRPC menggunakan httpBatchLink yang mengumpulkan beberapa permintaan tRPC serentak ke dalam satu permintaan HTTP. Beberapa panggilan useQuery dalam kitaran pemaparan komponen yang sama dihantar dan diselesaikan bersama.

Ini mengurangkan beban berlebihan rangkaian dengan ketara berbanding permintaan HTTP berasingan untuk setiap pertanyaan pada halaman yang mempunyai banyak keperluan data.

Takrifkan prosedur langganan: publicProcedure.subscription(async function*() { while (true) { yield await nextEvent(); } }). Langganan menggunakan penjana tak segerak dan memerlukan pengangkutan WebSocket.

Langganan sesuai untuk ciri masa nyata: pemberitahuan langsung, kursor penyuntingan kolaboratif atau respons AI penstriman.

Gantikan httpBatchLink dengan gabungan httpBatchLink dan wsLink menggunakan splitLink: halakan langganan kepada wsLink dan pertanyaan/mutasi kepada httpBatchLink. Cipta klien WebSocket dengan createWSClient({ url: 'ws://localhost:3000' }).

Pengangkutan hibrid ini bermaksud kebanyakan permintaan menggunakan pengumpulan HTTP yang cekap, manakala langganan menggunakan sambungan WebSocket yang berterusan.

trpc.notifications.onNew.useSubscription(undefined, { onData: (notification) => addToList(notification), onError: console.error }) melanggan prosedur tersebut. Panggil balik onData dipanggil bagi setiap nilai yang dijana.

Langganan diwujudkan semula secara automatik jika WebSocket terputus dan bersambung semula.

Halaman senarai masa nyata mungkin menggunakan pertanyaan untuk memuatkan senarai awal, mutasi untuk menambah entri dan langganan untuk menerima penambahan langsung daripada pengguna lain. Ketiga-tiganya ditaip berdasarkan AppRouter yang sama dan bergabung secara semula jadi.

Strategi pembatalan cache bergantung pada sama ada anda lebih suka pengambilan semula penuh (batalkan selepas mutasi) atau kemas kini cache (utils.post.getAll.setData).

Takrifkan pertanyaan dengan .query() dan mutasi dengan .mutation(), kedua-duanya disahkan oleh skema Zod. Pada klien, gunakan trpc.router.procedure.useQuery() dan useMutation(). Batalkan kesahan pertanyaan selepas mutasi dengan utils.procedure.invalidate(). Langganan menggunakan penjana tak segerak dan memerlukan wsLink untuk pengangkutan WebSocket.

httpBatchLink mengumpulkan pertanyaan serentak ke dalam satu permintaan HTTP secara lalai.