rpc-client

Generate Hono RPC Client

Create a type-safe client for your Hono API using the hc client.

Workflow

Step 1: Verify Server Setup

Check that the server exports the app type:

// src/index.ts
import { Hono } from 'hono'

const app = new Hono()

// ... routes ...

export default app

// REQUIRED: Export type for RPC client
export type AppType = typeof app

Step 2: Create Client Package

For monorepo or separate client package:

# If using monorepo with workspaces
mkdir -p packages/api-client
cd packages/api-client
bun init -y
bun add hono

packages/api-client/package.json:

{
  "name": "@{project}/api-client",
  "version": "1.0.0",
  "main": "src/index.ts",
  "types": "src/index.ts",
  "exports": {
    ".": "./src/index.ts"
  },
  "dependencies": {
    "hono": "^4.0.0"
  }
}

Step 3: Create Client

packages/api-client/src/index.ts:

import { hc } from 'hono/client'
import type { AppType } from '@{project}/api/src/index'

// Create typed client
export const createApiClient = (baseUrl: string) => {
  return hc<AppType>(baseUrl)
}

// Default client for common use
export const api = createApiClient(
  process.env.API_URL || 'http://localhost:8787'
)

// Re-export types for consumers
export type { AppType }

// Export inferred types for convenience
export type ApiClient = ReturnType<typeof createApiClient>

Step 4: Usage Examples

Basic Usage:

import { api } from '@{project}/api-client'

// GET request
const users = await api.api.users.$get()
const data = await users.json()

// POST request with body
const newUser = await api.api.users.$post({
  json: {
    email: '[email protected]',
    name: 'New User'
  }
})

// GET with query params
const searchResults = await api.api.users.$get({
  query: {
    page: 1,
    limit: 10,
    search: 'john'
  }
})

// GET with path params
const user = await api.api.users[':id'].$get({
  param: { id: 'user-uuid' }
})

// PUT with params and body
const updated = await api.api.users[':id'].$put({
  param: { id: 'user-uuid' },
  json: { name: 'Updated Name' }
})

// DELETE
await api.api.users[':id'].$delete({
  param: { id: 'user-uuid' }
})