Belajar tRPC - Pre-Requisites Skill & Setup Environment

#Pendahuluan

Selamat datang di series Belajar tRPC! Series ini akan membawa kalian menguasai tRPC — library TypeScript RPC yang membuat server dan client berbagi tipe secara langsung, tanpa codegen dan tanpa duplikasi schema. Total ada 19 episode yang tersusun dari enam fase, dari konsep dasar sampai production readiness.

Tapi sebelum menulis router pertama, ada beberapa skill dasar dan perangkat lunak yang wajib kalian miliki. Mengapa prasyarat penting? Karena kekuatan utama tRPC adalah inferensi tipe TypeScript end-to-end. Kalau kalian belum paham generics atau tidak pernah melihat kode TypeScript yang memakai tipe statis, sebagian besar keajaiban tRPC akan terasa seperti sihir.

Episode 0 ini adalah peta jalan kalian: memastikan skill dasar, menyiapkan Node.js dan TypeScript, menginstall paket tRPC, dan melakukan verifikasi pertama. Setelah episode ini selesai, seluruh series bisa diikuti dengan nyaman.

#Skill Dasar yang Wajib Dikuasai

#TypeScript Modern dan Generics

tRPC dibangun di atas TypeScript. Pastikan kalian nyaman dengan tipe primitif, interface, union type, dan terutama generics — karena router tRPC secara internal memakai generics untuk menurunkan tipe dari server ke client. Berikut pola yang akan sering muncul:

function ambil<T>(items: T[], index: number): T {
  return items[index];
}
 
const nama = ambil(["andi", "budi"], 0);
const angka = ambil([1, 2, 3], 1);

Perhatikan bahwa nama bertipe string dan angka bertipe number — tipe diturunkan otomatis tanpa penulisan eksplisit. Inilah prinsip dasar yang sama dipakai tRPC untuk menurunkan tipe procedure dari server ke client.

#API Contract-First dan JSON Schema

Pahami juga konsep API contract-first: menentukan bentuk data lebih dulu sebelum implementasi. tRPC tidak wajib memakai JSON Schema, tetapi bekerja sangat baik dengan validator seperti zod yang mendeskripsikan bentuk input dan output prosedur. Nanti di episode 3, kalian akan melihat bahwa schema input menjadi satu-satunya sumber kebenaran di kedua sisi.

#Konsep RPC, REST, dan GraphQL

Secara umum, kalian perlu paham tiga paradigma API:

• RPC: memanggil prosedur/fungsi jarak jauh dengan nama tertentu, misalnya getUser.
• REST: memodelkan resource dengan HTTP method dan URL, misalnya GET /users/1.
• GraphQL: satu endpoint dengan query language yang menentukan bentuk response.

tRPC adalah bentuk RPC modern yang memanfaatkan TypeScript. Perbandingan detailnya akan kita bedah di episode 1.

#Perangkat Lunak yang Perlu Disiapkan

#Node.js LTS dan Package Manager

tRPC berjalan di atas Node.js. Install Node.js LTS terbaru — package manager npm sudah otomatis menyertainya. Untuk series ini kita akan memakai npm, tapi pnpm dan bun juga didukung penuh.

node --version
npm --version

Pastikan versi Node minimal 18. Jika belum ada, kunjungi situs resmi Node.js dan unduh versi LTS, atau pakai Node Version Manager untuk berpindah versi dengan mudah.

#Editor dan HTTP Client

Editor yang wajib kalian miliki adalah yang mendukung TypeScript dengan baik — VS Code adalah pilihan paling umum. Untuk menguji API nanti di episode 4, siapkan browser untuk frontend dan sebuah HTTP client seperti Postman atau cukup curl di terminal.

#Docker (Opsional)

Untuk integrasi service di episode 10 dan deployment nanti, Docker opsional namun sangat membantu. Verifikasi dengan perintah berikut jika kalian memutuskan menggunakannya:

docker --version

#Setup Project TypeScript Pertama

#Membuat Project dan Menyiapkan TypeScript

Mulai dengan membuat direktori project dan inisialisasi npm:

mkdir belajar-trpc
cd belajar-trpc
npm init -y
npm install typescript @types/node zod
npm install --save-dev tsx
npx tsc --init

npx tsc --init membuat file tsconfig.json dengan konfigurasi default. Ubah "target" menjadi "ES2020" atau lebih baru, dan pastikan "strict" bernilai true — mode strict akan menangkap banyak bug sebelum runtime.

#Menginstall Library tRPC

Sekarang install paket inti tRPC. Untuk server dan client generic:

npm install @trpc/server @trpc/client

Dua paket ini sudah cukup untuk membangun API dan mengkonsumsinya tanpa React. Di episode 4 nanti kita akan menambahkan @trpc/react-query dan @tanstack/react-query untuk integrasi dengan frontend React.

#Verifikasi Environment

Sebelum lanjut ke episode 1, buat file verify.ts dengan isi berikut untuk memastikan semuanya terpasang dengan benar:

import { initTRPC } from "@trpc/server";
import { createCallerFactory } from "@trpc/server";
import { z } from "zod";
 
const t = initTRPC.create();
 
const appRouter = t.router({
  halo: t.procedure
    .input(z.object({ nama: z.string() }))
    .query(({ input }) => `Halo, ${input.nama}!`),
});
 
const createCaller = createCallerFactory(appRouter);
const caller = createCaller({});
 
const hasil = await caller.halo({ nama: "Arman" });
console.log(hasil);

Jalankan dengan tsx:

npx tsx verify.ts

Jika menampilkan Halo, Arman!, environment kalian sudah siap. Perintah createCallerFactory(appRouter) membuat pemanggil langsung di dalam server — detail router dan procedure akan kita bedah mulai episode 3.

#Ringkasan Skill yang Harus Dikuasai

Rangkuman prasyarat yang sudah kalian siapkan di episode 0:

• TypeScript modern: tipe statis, union, interface, dan generics.
• Konsep API: RPC, REST, GraphQL, dan contract-first dengan validator.
• Node.js LTS dengan npm, plus tsx untuk menjalankan TypeScript.
• @trpc/server dan @trpc/client terinstall bersama zod.
• Verifikasi pertama: router halo yang dipanggil lewat caller.

Jika ada yang belum terpenuhi, berhenti dulu dan lengkapi sebelum melanjutkan. Fondasi yang kuat akan membuat 18 episode berikutnya terasa jauh lebih ringan.

#Penutup

Di episode 0 ini kalian sudah menyiapkan pijakan untuk seluruh series: memahami skill TypeScript yang dibutuhkan, menyiapkan Node.js dan tooling, menginstall paket tRPC, serta memverifikasi router pertama yang menghasilkan output.

Inti yang harus dibawa pulang:

• tRPC bekerja di atas inferensi tipe TypeScript: kuasai generics.
• Pahami konsep RPC, REST, dan GraphQL untuk membandingkannya nanti.
• Node.js LTS plus npm adalah fondasi minimal yang dibutuhkan.
• @trpc/server dan @trpc/client adalah dua paket inti.
• Verifikasi pertama: buat router, panggil lewat createCallerFactory.
• Aktifkan mode strict TypeScript sejak awal project.

Di episode 1 selanjutnya kita akan membahas sejarah, latar belakang, dan mengapa membutuhkan tRPC — dari asal usulnya di komunitas TypeScript, evolusinya dari RPC sederhana ke full-stack zero-boilerplate, hingga perbandingannya dengan REST dan GraphQL. Pastikan environment kalian sudah siap, karena perjalanan Belajar tRPC baru saja dimulai!