tRPC Server Middleware for Hono

tRPC Server Middleware adapts a tRPC server as middleware for Hono. Hono works on almost any JavaScript runtime, including Cloudflare Workers, Deno, and Bun. So, with this middleware, the same code will run as tRPC server.

Install

npm install @hono/trpc-server

Usage

Router:

1import { initTRPC } from '@trpc/server'
2import { z } from 'zod'
3
4const t = initTRPC.create()
5
6const publicProcedure = t.procedure
7const router = t.router
8
9export const appRouter = router({
10  hello: publicProcedure.input(z.string().nullish()).query(({ input }) => {
11    return `Hello ${input ?? 'World'}!`
12  }),
13})
14
15export type AppRouter = typeof appRouter

Hono app using tRPC Server Middleware:

1import { Hono } from 'hono'
2import { trpcServer } from '@hono/trpc-server' // Deno 'npm:@hono/trpc-server'
3import { appRouter } from './router'
4
5const app = new Hono()
6
7app.use(
8  '/trpc/*',
9  trpcServer({
10    router: appRouter,
11  })
12)
13
14export default app

Client:

1import { createTRPCProxyClient, httpBatchLink } from '@trpc/client'
2import type { AppRouter } from './router'
3
4const client = createTRPCProxyClient<AppRouter>({
5  links: [
6    httpBatchLink({
7      url: 'http://localhost:8787/trpc',
8    }),
9  ],
10})
11
12console.log(await client.hello.query('Hono'))

Context

You can also access c.env from hono context from the trpc ctx. eg. here's an example using cloudflare D1 binding available as env.DB

1import { initTRPC } from '@trpc/server'
2import { z } from 'zod'
3
4type Env = {
5  DB: D1Database;
6}
7type HonoContext = {
8  env: Env,
9};
10
11const t = initTRPC.context<HonoContext>().create()
12
13const publicProcedure = t.procedure
14const router = t.router
15
16export const appRouter = router({
17  usersCount: publicProcedure.query(({ input, ctx }) => {
18    const result = await ctx.env.DB.prepare("SELECT count(*) from user;").all();
19    return result.results[0].count;
20  }),
21})
22
23export type AppRouter = typeof appRouter

For further control, you can optionally specify a createContext that in this case will receive the hono context as 2nd argument:

1app.use(
2  '/trpc/*',
3  trpcServer({
4    router: appRouter,
5    createContext: (_opts, c) => ({
6      // c is the hono context
7      var1: c.env.MY_VAR1,
8      var2: c.req.header('X-VAR2'),
9    })
10  })
11)

Custom Endpoints

To set up custom endpoints ensure the endpoint parameter matches the middleware's path. This alignment allows @trpc/server to accurately extract your procedure paths.

1import { Hono } from 'hono'
2import { trpcServer } from '@hono/trpc-server'
3import { appRouter } from './router'
4
5const app = new Hono()
6
7// Custom endpoint configuration
8app.use(
9  '/api/trpc/*',
10  trpcServer({
11    endpoint: '/api/trpc',
12    router: appRouter,
13  })
14)
15
16export default app

Author

Yusuke Wada https://github.com/yusukebe

License

MIT