Belajar HonoJS - RPC Mode: Type-Safe Client Calls

#Pendahuluan

Setelah di episode 8 kita mengintegrasikan Drizzle ORM, pada episode ini kita akan memahami RPC mode — fitur Hono yang memungkinkan client untuk memanggil route dengan type safety penuh tanpa code generation.

#Mengapa RPC Mode Penting

Masalah utama dalam pengembangan full-stack TypeScript adalah gap antara tipe di server dan client. Dengan REST API tradisional, kalian harus mendefinisikan ulang tipe di client secara manual — atau menggunakan code generation yang menambah step.

RPC mode Hono menyelesaikan masalah ini dengan mengimpor tipe langsung dari server. Ketika kalian mengupdate route di server, client otomatis mendapat update.

#Setup RPC Client

#Server

import { Hono } from 'hono'
 
const app = new Hono()
  .get('/user/:id', (c) => {
    return c.json({ id: c.req.param('id'), name: 'John' })
  })
  .post('/user', async (c) => {
    const body = await c.req.json()
    return c.json({ id: 1, ...body }, 201)
  })
 
export type AppType = typeof app
export default app

#Client

import { hc } from 'hono/client'
import type { AppType } from './server'
 
const client = hc<AppType>('http://localhost:8787')
 
// GET request
const res = await client.user.$get({ param: { id: '123' } })
const data = await res.json()
// data otomatis typed: { id: string, name: string }
 
// POST request
const createRes = await client.user.$post({
  json: { name: 'Jane', email: 'jane@example.com' }
})

#Type Inference di Client

#Autocomplete di IDE

Ketika kalian menulis kode client, IDE akan memberikan autocomplete untuk semua route, params, query, dan body — langsung dari tipe server:

// IDE akan suggest: /user/:id, /user, dll.
const res = await client.user.$get({
  param: { id: '123' }
})

#Error Jika Akses Property Salah

const res = await client.user.$get({ param: { id: '123' } })
const data = await res.json()
console.log(data.email) // Error: Property 'email' does not exist

#Update Server → Client Otomatis Update

Ketika kalian menambahkan field baru ke response di server, client otomatis mendapat field tersebut tanpa perubahan kode client.

#Request dan Response di RPC

#GET dengan Query

const res = await client.search.$get({
  query: { q: 'hello', page: '1' }
})

#POST dengan Body

const res = await client.user.$post({
  json: { name: 'John', email: 'john@example.com' }
})

#PUT dengan Params dan Body

const res = await client.user.$put({
  param: { id: '123' },
  json: { name: 'Jane' }
})

#Kapan Pakai RPC vs REST Client

#Penutup

Pada episode 9 ini, kalian telah memahami RPC mode di Hono — fitur yang membedakan Hono dari framework lain.

Inti yang harus dibawa pulang:

• hc<AppType>() membuat RPC client dengan type inference.
• Autocomplete, type checking, dan error detection otomatis di IDE.
• Update route di server → client otomatis update.
• Ideal untuk full-stack TypeScript, kurang cocok untuk public API multi-bahasa.

Di episode 10 selanjutnya kita akan memahami static files, serve, dan JSX rendering — menyajikan file statis, rendering JSX di server, dan full-stack app dengan Hono. Sampai jumpa di episode 10!