Belajar tRPC - Tooling Modern & Fitur Stabil Terbaru

#Pendahuluan

Inilah episode terakhir perjalanan Belajar tRPC. Episode 18 merangkum tooling modern dan fitur stabil yang selama ini dipakai, lalu melihat ke depan: bagaimana tRPC menempati tren production seperti full-stack type safety, monorepo, dan API-first DX.

Ini bukan sekadar daftar — ini peta bagaimana kalian memanfaatkan semua yang sudah dipelajari untuk membangun aplikasi yang aman tipe dari ujung ke ujung.

#Tooling Modern tRPC

#Empat Paket yang Harus Dikenali

Seluruh series memakai ekosistem yang terdiri dari empat paket utama:

• @trpc/server: router, procedure, middleware, adapter, dan TRPCError.
• @trpc/client: createTRPCProxyClient, createTRPCClient, dan semua links.
• @trpc/react-query: createTRPCReact untuk hooks React.
• @trpc/next: createTRPCNext untuk integrasi Next.js pages router.

npm install @trpc/server @trpc/client @trpc/react-query @trpc/next
npm install zod @tanstack/react-query

Setiap paket punya satu tanggung jawab. Pahami batasnya agar import selalu tepat: adapter server di @trpc/server/adapters/..., links di @trpc/client, dan hooks di @trpc/react-query.

#createTRPCProxyClient dalam Berbagai Konteks

createTRPCProxyClient adalah pintu tRPC di luar React. Ia dipakai untuk script, microservice, dan bahkan fungsi cloud:

import { createTRPCProxyClient, httpBatchLink } from "@trpc/client";
 
const trpc = createTRPCProxyClient<AppRouter>({
  links: [
    httpBatchLink({
      url: "http://api.internal:3000/trpc",
      headers: () => ({ Authorization: `Bearer ${getToken()}` }),
    }),
  ],
});
 
export async function ambilDashboard(userId: number) {
  const [user, stats] = await Promise.all([
    trpc.user.byId.query({ id: userId }),
    trpc.user.stats.query({ id: userId }),
  ]);
  return { user, stats };
}

Satu definisi router, dikonsumsi dari mana saja: React, server, ataupun fungsi edge — selalu dengan tipe yang sama.

#Fitur Stabil dan Konvensi tRPC v10+

#router.merge untuk Router Modular

router.merge memungkinkan router lain digabungkan tanpa mengubah struktur aslinya — ideal untuk menggabungkan router dari package terpisah:

import { router } from "./trpc";
import { adminRouter } from "./routers/admin";
import { userRouter } from "./routers/user";
 
const appRouter = router({
  user: userRouter,
});
 
const fullRouter = appRouter.merge(adminRouter);

appRouter.merge(adminRouter) menggabungkan seluruh procedure adminRouter ke router yang ada. Ini membuat pembagian kode per domain (dan lazy loading dari episode 13) tetap rapi tanpa mengorbankan satu kontrak API.

#procedure.input/output dan Links

Konvensi stabil yang dipakai sepanjang series:

• .input(schema) — validasi dan pengetikan argumen.
• .output(schema) — validasi response dan pengetikan keluaran.
• .query(), .mutation(), .subscription() — tiga jenis procedure.
• .use(middleware) — komposisi perilaku.

Lengkapnya dengan links:

const links = [
  loggerLink({ enabled: () => isDev }),
  splitLink({
    condition: (op) => op.type === "subscription",
    true: wsLink({ url: wsUrl }),
    false: httpBatchLink({ url: trpcUrl }),
  }),
];

Pola di atas adalah konfigurasi links standar yang kalian pakai sejak episode 6: logger di development, subscription lewat WebSocket, sisanya HTTP batch.

#Tren Produksi dengan tRPC

#Full-Stack Type Safety

tRPC adalah wajah dari gerakan full-stack type safety: satu bahasa (TypeScript) dan satu sistem tipe untuk seluruh aplikasi. Kesalahan kontrak terdeteksi saat compile, bukan saat produksi. Tren ini terus menguat — dari library baru hingga framework framework seperti Next.js dan Astro yang semuanya makin TypeScript-first.

#Monorepo Integration

tRPC berkembang luar biasa dalam monorepo. Struktur umum dengan pnpm workspaces atau Turborepo:

apps/
├── web/        # Next.js + @trpc/react-query
└── api/        # server tRPC
packages/
├── server/     # router + procedure bersama
└── shared/     # schema zod yang dipakai lintas app

Dengan monorepo, perubahan schema di packages/shared langsung terlihat dan tervalidasi di semua konsumen — satu perubahan, seluruh contract diperbarui.

#API-First DX

tRPC mendefinisikan ulang developer experience: tanpa codegen, tanpa dokumentasi basi, tanpa langkah sinkronisasi. API adalah kode TypeScript biasa, dan editor menjadi dokumentasi yang selalu akurat. Ini arah yang diikuti ekosistem JavaScript modern.

#Penutup

Episode 18 menutup series dengan rangkuman utuh: empat paket tooling tRPC, fitur stabil seperti router.merge, procedure.input/output, dan links, serta tren produksi — full-stack type safety, monorepo, dan API-first DX — yang menjadikan tRPC pilihan natural untuk aplikasi TypeScript modern.

Inti yang harus dibawa pulang:

• Kenali peran empat paket: server, client, react-query, dan next.
• createTRPCProxyClient menghubungkan tRPC ke context non-React.
• router.merge menjaga router modular dalam satu kontrak API.
• .input dan .output adalah tulang punggung type-safety.
• Monorepo memaksimalkan shared types antar aplikasi.
• tRPC adalah implementasi nyata full-stack type safety.

Demikian perjalanan 19 episode Belajar tRPC: dari prasyarat, arsitektur, API pertama, hingga deployment production dan tren terbaru. Kalian sekarang punya bekal untuk membangun aplikasi full-stack TypeScript yang aman tipe dari ujung ke ujung. Terapkan dalam project nyata, dan semoga setiap compile yang sukses menjadi bukti bahwa contract kalian selalu selaras. Selamat berkarya!