## Analogi Sederhana Bayangin kamu lagi kerja bareng temen di satu ruangan. **REST API** itu kayak kirim pesan pake kertas - kamu tulis request, lempar ke seberang, tunggu balasan. Bisa aja salah tulis, bisa salah format, tau-tau error pas udah lempar. **tRPC** lebih kayak ngobrol langsung face-to-face dengan translator real-time - kamu langsung tau kalau salah ngomong (TypeScript error), dan langsung tau apa aja yang bisa kamu minta (autocomplete). Semua jelas, instant feedback. ## Kenapa tRPC Ada? Masalah dengan traditional API di project TypeScript: **Problem 1: Type Disconnect** ```typescript // Backend app.post('/api/user', (req, res) => { const { name, email } = req.body // any type // ... }) // Frontend const response = await fetch('/api/user', { method: 'POST', body: JSON.stringify({ nam: 'Galih' }) // Typo! Ga ada error }) ``` **Problem 2: Manual Type Sync** Backend berubah? Frontend ga tau. Update types manual? Rawan error. **Problem 3: No Auto-complete** Lupa endpoint API atau struktur payload? Harus buka docs atau backend code. **Solusinya: tRPC** ```typescript // Backend bikin procedure createUser: publicProcedure .input(z.object({ name: z.string(), email: z.string() })) .mutation(({ input }) => db.user.create(input)) // Frontend - FULLY TYPED! await trpc.createUser.mutate({ name: 'Galih', email: 'hi@galihpratama.com' }) // Typo? TypeScript error SEBELUM runtime // Auto-complete jalan di mana-mana! ``` ## tRPC vs Alternatives ### tRPC vs REST API | Aspek | tRPC | REST | |-------|------|------| | Type Safety | Native | Manual types | | Auto-completion | Full | | | API Documentation | Auto from types | Manual (Swagger) | | Learning Curve | Low | Low | | Public API | | | | Mobile Apps | TS only | | ### tRPC vs GraphQL | Aspek | tRPC | GraphQL | |-------|------|----------| | Setup Complexity | Easy | Medium/Hard | | Type Safety | Native | Codegen needed | | Over-fetching | Rare | Solved | | Learning Curve | Low | High | | Ecosystem | Growing | Mature | | Non-TS clients | | | **Kapan Pakai tRPC?** - Project full-stack TypeScript (Next.js, Remix, dll) - Monorepo dengan shared code - Internal tools & API - Rapid development dengan type safety - Team kecil-medium yang full TypeScript **Kapan JANGAN Pakai tRPC?** - Public API (REST/GraphQL lebih cocok) - Mobile app yang ga pake TypeScript - Microservices lintas team/bahasa pemrograman - Butuh fitur GraphQL khusus (fragments, caching, dll) ## Setup Guide (10 Menit) ### Step 1: Install Dependencies ```bash npm install @trpc/server @trpc/client @trpc/react-query @trpc/next npm install @tanstack/react-query zod ``` ### Step 2: Initialize tRPC ```typescript // server/trpc.ts import { initTRPC } from '@trpc/server' const t = initTRPC.create() export const router = t.router export const publicProcedure = t.procedure ``` ### Step 3: Create Router ```typescript // server/routers/user.ts import { z } from 'zod' import { router, publicProcedure } from '../trpc' export const userRouter = router({ getUser: publicProcedure .input(z.object({ id: z.string() })) .query(async ({ input }) => { // Fetch user from database return { id: input.id, name: 'Galih' } }), createUser: publicProcedure .input(z.object({ name: z.string(), email: z.string().email() })) .mutation(async ({ input }) => { // Create user in database return { id: '1', ...input } }) }) ``` ### Step 4: Combine Routers ```typescript // server/index.ts import { router } from './trpc' import { userRouter } from './routers/user' export const appRouter = router({ user: userRouter }) export type AppRouter = typeof appRouter ``` ### Step 5: Setup Next.js API Route ```typescript // pages/api/trpc/[trpc].ts import { createNextApiHandler } from '@trpc/server/adapters/next' import { appRouter } from '@/server' export default createNextApiHandler({ router: appRouter, createContext: () => ({}) }) ``` ### Step 6: Setup Client ```typescript // utils/trpc.ts import { createTRPCNext } from '@trpc/next' import { httpBatchLink } from '@trpc/client' import type { AppRouter } from '@/server' export const trpc = createTRPCNext({ config() { return { links: [ httpBatchLink({ url: '/api/trpc' }) ] } } }) ``` ### Step 7: Wrap App ```typescript // pages/_app.tsx import { trpc } from '@/utils/trpc' function MyApp({ Component, pageProps }) { return } export default trpc.withTRPC(MyApp) ``` Done! Sekarang kamu punya type-safe API. ## Contoh Real-World: Platform Blog Skenario: Bikin platform blog dengan CRUD operations, semua fully typed. ### 1. Definisikan Schema dengan Zod ```typescript // server/schemas.ts import { z } from 'zod' export const createPostSchema = z.object({ title: z.string().min(1).max(200), content: z.string().min(1), published: z.boolean().default(false) }) export const updatePostSchema = z.object({ id: z.string(), title: z.string().min(1).max(200).optional(), content: z.string().min(1).optional(), published: z.boolean().optional() }) ``` ### 2. Bikin Post Router ```typescript // server/routers/post.ts import { router, publicProcedure } from '../trpc' import { createPostSchema, updatePostSchema } from '../schemas' import { z } from 'zod' export const postRouter = router({ // List semua post list: publicProcedure .input(z.object({ limit: z.number().min(1).max(100).default(10), cursor: z.string().optional() })) .query(async ({ input }) => { const posts = await prisma.post.findMany({ take: input.limit + 1, cursor: input.cursor ? { id: input.cursor } : undefined, orderBy: { createdAt: 'desc' } }) let nextCursor: string | undefined if (posts.length > input.limit) { const nextItem = posts.pop() nextCursor = nextItem!.id } return { posts, nextCursor } }), // Ambil satu post byId: publicProcedure .input(z.object({ id: z.string() })) .query(async ({ input }) => { const post = await prisma.post.findUnique({ where: { id: input.id }, include: { author: true } }) if (!post) { throw new TRPCError({ code: 'NOT_FOUND', message: 'Post not found' }) } return post }), // Bikin post create: publicProcedure .input(createPostSchema) .mutation(async ({ input }) => { const post = await prisma.post.create({ data: input }) return post }), // Update post update: publicProcedure .input(updatePostSchema) .mutation(async ({ input }) => { const { id, ...data } = input const post = await prisma.post.update({ where: { id }, data }) return post }), // Hapus post delete: publicProcedure .input(z.object({ id: z.string() })) .mutation(async ({ input }) => { await prisma.post.delete({ where: { id: input.id } }) return { success: true } }) }) ``` ### 3. Pakai di Frontend - List Post ```typescript // components/PostList.tsx 'use client' import { trpc } from '@/utils/trpc' export default function PostList() { const { data, isLoading, error } = trpc.post.list.useQuery({ limit: 10 }) if (isLoading) return

if (error) return

Error: {error.message}

return (

{data?.posts.map((post) => (

{post.title}

{post.content}

))}

) } ``` ### 4. Form Bikin Post ```typescript // components/CreatePostForm.tsx 'use client' import { useState } from 'react' import { trpc } from '@/utils/trpc' export default function CreatePostForm() { const [title, setTitle] = useState('') const [content, setContent] = useState('') const utils = trpc.useContext() const createPost = trpc.post.create.useMutation({ onSuccess: () => { // Invalidate dan refetch post utils.post.list.invalidate() setTitle('') setContent('') } }) async function handleSubmit(e: React.FormEvent) { e.preventDefault() await createPost.mutateAsync({ title, content, published: true }) } return (

setTitle(e.target.value)} placeholder="Title" required />

setContent(e.target.value)}
    placeholder="Content"
    required
   />
   <button
    type="submit"
    disabled={createPost.isLoading}
   >
    {createPost.isLoading ? 'Creating...' : 'Create Post'}
   </button>

{createPost.error && (
    <p className="error">{createPost.error.message}</p>
   )}
  </form>
 )
}
```

### 5. Infinite Scroll
```typescript
// components/InfinitePostList.tsx
'use client'

import { trpc } from '@/utils/trpc'

export default function InfinitePostList() {
 const {
  data,
  fetchNextPage,
  hasNextPage,
  isFetchingNextPage
 } = trpc.post.list.useInfiniteQuery(
  { limit: 10 },
  {
   getNextPageParam: (lastPage) => lastPage.nextCursor
  }
 )

return (
  <div>
   {data?.pages.map((page) =>
    page.posts.map((post) => (
     <article key={post.id}>
      <h2>{post.title}</h2>
      <p>{post.content}</p>
     </article>
    ))
   )}

{hasNextPage && (
    <button
     onClick={() => fetchNextPage()}
     disabled={isFetchingNextPage}
    >
     {isFetchingNextPage ? 'Loading...' : 'Load More'}
    </button>
   )}
  </div>
 )
}
```

**Yang Kamu Dapet:**
- Full type safety dari backend ke frontend
- Auto-completion di semua API call
- Input validation dengan Zod
- React Query integration (caching, refetch, dll)
- Support infinite queries
- Siap buat optimistic updates

## Key Features

### Authentication dengan Context
```typescript
// server/trpc.ts
import { inferAsyncReturnType } from '@trpc/server'
import { CreateNextContextOptions } from '@trpc/server/adapters/next'

export async function createContext({ req, res }: CreateNextContextOptions) {
 const user = await getUserFromSession(req)
 return { user, req, res }
}

export type Context = inferAsyncReturnType<typeof createContext>

const t = initTRPC.context<Context>().create()

// Protected procedure
export const protectedProcedure = t.procedure.use(({ ctx, next }) => {
 if (!ctx.user) {
  throw new TRPCError({ code: 'UNAUTHORIZED' })
 }
 return next({
  ctx: {
   user: ctx.user // user dijamin ada
  }
 })
})
```

### Automatic Request Batching
```typescript
// Multiple queries di render yang sama
const user = trpc.user.getById.useQuery({ id: '1' })
const posts = trpc.post.list.useQuery({ limit: 10 })
const comments = trpc.comment.list.useQuery({ limit: 5 })

// tRPC otomatis gabungin jadi 1 HTTP request!
```

### Subscriptions (Real-time)
```typescript
// Server
onPostCreated: publicProcedure.subscription(() => {
 return observable<Post>((emit) => {
  const onPost = (post: Post) => emit.next(post)
  eventEmitter.on('postCreated', onPost)
  return () => eventEmitter.off('postCreated', onPost)
 })
})

// Client
trpc.post.onPostCreated.useSubscription(undefined, {
 onData(post) {
  console.log('New post:', post)
 }
})
```

## Kesimpulan

tRPC ngebantu solve masalah terbesar di full-stack TypeScript: **type disconnect antara frontend dan backend**.

Keuntungannya:
1. **Zero Codegen** → Types langsung diambil dari backend
2. **Auto-completion** → IDE tau semua endpoint dan payload
3. **Type Safety** → Catch error sebelum runtime
4. **Great DX** → Fast feedback loop, minimal boilerplate
5. **React Query** → Built-in caching, refetch, optimistic updates

### Checklist: Mulai Pakai tRPC

**Setup:**
- [ ] Install tRPC packages dan React Query
- [ ] Initialize tRPC dengan `initTRPC.create()`
- [ ] Bikin router dengan procedures
- [ ] Export type `AppRouter`
- [ ] Setup Next.js API handler

**Implementasi:**
- [ ] Definisikan schema dengan Zod
- [ ] Implement queries (operasi read)
- [ ] Implement mutations (operasi write)
- [ ] Setup tRPC client di frontend
- [ ] Wrap app dengan `trpc.withTRPC()`

**Advanced:**
- [ ] Tambahin authentication context
- [ ] Bikin protected procedures
- [ ] Implement error handling
- [ ] Tambahin middleware buat logging/metrics
- [ ] Setup subscriptions buat fitur real-time

**Best Practices:**
- [ ] Pake Zod buat semua input validation
- [ ] Keep router focused (satu domain per router)
- [ ] Manfaatin fitur React Query (invalidate, optimistic updates)
- [ ] Pake `useContext()` buat manipulasi cache manual
- [ ] Handle loading dan error states dengan benar

**Kapan tRPC Paling Cocok:**
Project monorepo TypeScript
Aplikasi Next.js
Internal tools & dashboards
Rapid prototyping
Team kecil-medium yang full TypeScript

**Pertimbangin Alternatif Kalau:**
Bikin public API
Butuh client non-TypeScript
Microservices lintas team/bahasa
Butuh fitur GraphQL khusus

Langkah Selanjutnya:
1. Cek [tRPC docs](https://trpc.io) buat advanced patterns
2. Explore tRPC + Prisma integration
3. Coba tanstack-query devtools buat debugging
4. Join tRPC Discord community

**Key Insight:** tRPC paling maksimal di TypeScript monorepo. Kalau frontend dan backend sama-sama TypeScript, ga ada alasan buat ga pakai tRPC. Type safety yang kamu dapet worth banget dibanding setup overhead yang minimal.

Setelah ngerasain autocomplete di API calls dan catch error sebelum runtime, susah banget balik ke REST API yang ga type-safe!
</article></body></html>

tRPC: End-to-End Type Safety dari Frontend ke Backend