Masalah yang Diselesaikan oleh tRPC

Apabila Anda membina API REST dalam TypeScript, pelayan mentakrifkan bentuk respons. Klien perlu mencipta jenis TypeScript yang sepadan secara manual. Jenis ini menyimpang dari semasa ke semasa apabila API berkembang, dan pengkompil tidak dapat mengesan ketidakpadanan kerana jenis tersebut ditakrifkan dalam pakej yang berasingan.

Medan yang dinamakan semula pada pelayan menjadi pepijat masa jalan yang senyap pada klien.

GraphQL menyelesaikan penyimpangan jenis dengan menjana jenis TypeScript daripada skema menggunakan alat seperti graphql-codegen. Ini berfungsi dengan baik tetapi menambah kerumitan: bahasa pertanyaan berasingan (GraphQL SDL), langkah penjanaan kod dalam saluran binaan dan alat pengurusan skema.

Bagi pasukan yang sudah menggunakan GraphQL secara meluas, codegen ialah jawapan yang tepat. Bagi pasukan yang mahukan keselamatan jenis tanpa beban tambahan GraphQL, tRPC menawarkan alternatif.

Pendekatan tRPC amat ringkas: takrifkan prosedur API pada pelayan sebagai fungsi TypeScript, eksport jenis penghala dan import jenis itu pada klien. Tiada penjanaan kod. Tiada bahasa skema berasingan.

Pengkompil TypeScript sendiri menguatkuasakan kontrak antara klien dan pelayan pada masa binaan.

tRPC memerlukan pelayan dan klien berkongsi jenis melalui import TypeScript. Ini berfungsi secara semula jadi dalam monorepo (Turborepo, Nx, ruang kerja pnpm), tempat pelayan dan klien merupakan pakej berasingan yang boleh mengimport antara satu sama lain.

Untuk bahagian belakang dan bahagian hadapan yang sepenuhnya berasingan, Anda perlu menerbitkan jenis penghala sebagai pakej dikongsi, yang menambah langkah penerbitan tetapi masih tanpa penjanaan kod.

Pada pelayan, Anda mentakrifkan penghala dan mengeksport jenisnya: export type AppRouter = typeof appRouter. Pada klien, Anda mengimport jenis itu dan mencipta klien bertaip: createTRPCReact(). Klien mengetahui dengan tepat prosedur yang tersedia serta jenis masukan dan keluarannya.

Menamakan semula prosedur pada pelayan serta-merta memaparkan ralat TypeScript pada klien.

Oleh sebab tRPC menggunakan sistem jenis TypeScript secara langsung, editor Anda menyediakan autolengkap penuh untuk nama prosedur, bentuk masukan dan jenis nilai pulangan pada sisi klien. Menamakan semula prosedur ialah pemfaktoran semula penamaan TypeScript, bukan carian dan penggantian manual merentas pangkalan kod.

Penambahbaikan pengalaman pembangun ini ialah ciri tRPC yang paling dipuji dalam amalan.

Secara lalai, tRPC menggunakan HTTP sebagai pengangkutannya. Setiap panggilan prosedur ialah permintaan HTTP. tRPC juga menyokong WebSockets untuk langganan. Pengangkutan ialah butiran pelaksanaan; API klien adalah sama tanpa mengira pengangkutan.

Anda juga boleh mendedahkan prosedur tRPC sebagai titik akhir REST konvensional menggunakan penyesuai REST untuk keserasian dengan klien bukan tRPC.

tRPC berfungsi sebagai perisian perantara dalam Express, Fastify dan Hono. Untuk Next.js, ia berintegrasi melalui pengendali laluan API. Pemula create-t3-app (T3 Stack) menghimpunkan tRPC, Prisma, NextAuth dan Tailwind ke dalam templat Next.js tindanan penuh.

T3 Stack ialah titik permulaan tRPC paling popular dan menunjukkan corak sedia untuk pengeluaran.

Pendekatan REST selamat jenis yang lain ialah mentakrifkan skema Zod, menjana spesifikasi OpenAPI secara automatik dan menjana jenis TypeScript daripada spesifikasi tersebut. Ini menyediakan kontrak API yang boleh digunakan oleh klien bukan TypeScript.

tRPC lebih mudah tetapi hanya untuk TypeScript. OpenAPI+Zod menambah kerumitan tetapi menghasilkan kontrak API awam. Pilih tRPC untuk komunikasi dalaman TypeScript-ke-TypeScript; pilih OpenAPI untuk API awam.

tRPC bukan pengganti REST apabila Anda memerlukan API awam yang digunakan oleh pihak ketiga, klien mudah alih yang tidak ditulis dalam TypeScript atau rakan kongsi yang memerlukan kontrak berversi yang stabil. Ia khusus untuk monorepo TypeScript dengan keselamatan jenis tindanan penuh.

Memahami skop ini menghalang penggunaan tRPC dalam konteks yang REST atau GraphQL lebih sesuai.

Menjalankan npm create t3-app@latest akan menjana rangka projek Next.js dengan tRPC, Prisma, NextAuth.js, Tailwind CSS dan TypeScript yang telah diprakonfigurasikan. Kod yang dijana menunjukkan struktur penghala, penciptaan konteks dan persediaan klien.

Mengkaji rangka ini ialah cara terpantas untuk memahami cara semua komponen tRPC disusun dalam aplikasi sebenar.

tRPC menyelesaikan ketidakselarasan jenis antara klien dan pelayan TypeScript dengan berkongsi jenis TypeScript penghala secara langsung melalui pengimportan, sekali gus menghapuskan penjanaan kod. Ia berfungsi dalam monorepo dan bersepadu dengan Next.js, Express, Fastify serta Hono. T3 Stack (create-t3-app) ialah pakej permulaan standard untuk pengeluaran.

tRPC hanya menyokong TypeScript dan paling sesuai untuk aplikasi tindanan penuh dalaman, bukannya API awam.