Difficulty with understanding Hono RPC.

[sureddibhargav]

Hello @yusukebe , can you guide me on using the Hono RPC,
I have a single api endpoint right now

const routes = app.route("/api/expenses", expenses);
export type APIRoutes = typeof routes; // exporting the types to use them on the client as hono rpc allows me to exchange the api spec between server and client

For some reason, I am not able to get type inference on the client.
I am using a react project with vite, bun runtime and tooling and hono in the backend.
This is my folder structure ->

For some reason when I export the types of the expenses app directly, the type inference is working when using hono rpc on the client

import { Hono } from "hono";
import { zValidator } from "@hono/zod-validator";
import { z } from "zod";
const expensesRoute = new Hono();

const expenseSchema = z.object({
	id: z.number().int().positive().min(1),
	title: z.string().min(3).max(150),
	amount: z.number().min(0).positive().max(50000), // come back to max value based on sql schema
});

type expense = z.infer<typeof expenseSchema>;

const createExpenseSchema = expenseSchema.omit({ id: true });

type createExpense = z.infer<typeof createExpenseSchema>;

const mainRoute = expensesRoute
	.get("/", (c) => {
		const expenses: expense[] = [
			{
				id: 3,
				amount: 3232.32,
				title: "Wdfads",
			},
		];
		c.status(200);
		return c.json({
			expenses: expenses,
		});
	})
	.post("/", zValidator("json", createExpenseSchema), async (c) => {
		const expense = c.req.valid("json");
		c.status(201);
		return c.json({
			message: "Added expense!",
			expense,
		});
	})
	.get("/:id{[0-9]+}", async (c) => {
		const expenseId = +c.req.param("id");
		const expenseWithId: expense = {
			id: expenseId,
			amount: 324,
			title: "Chocolates",
		};
		c.status(200);
		return c.json({
			expense: expenseWithId,
		});
	});

export default expensesRoute;

export type ExpensesAppType = typeof mainRoute;

Client

import { type ExpensesAppType } from "@server/routes/expenses.routes";
import { hc } from "hono/client";
const expensesClient = hc<ExpensesAppType>("/api/expenses");

export { expensesClient };

Can you tell me why this is happening.
Also can you please tell me what should be the url type? relative path?
I have proxy setup in my vite config.
So can you please tell me how it is working when I make a http request using the hono/client ?
I mean, when /api/expenses is given as the server url in the hc function that creates a client, how is the request finally reaching the hono server?

[Meess]

Short answer:
Default export mainRoute and not expensesRoute

Longer answer:
As it seems your type inference is correct with expensesRoute, I assume you do have "strict": true in compilerOptions of tsconfig.json.

Typescript sets the type when you create a variable. Therefore when you define expensesRoute, i.e. const expensesRoute = new Hono(); the expensesRoute can't infer your routes from just "new Hono()" because you haven't defined your routes on it yet. You do export it later on through export default expensesRoute; but typescript doesn't magically add types for things you did after declaration so it doesn't know...

However at the moment you define mainRoute TypeScript can infer the type for you because you apply all the routes to expensesRoute which returns the full router with typing const mainRoute = expensesRoute.get(.... That's why if you infer the type from mainRoute the typing is as expected, but you export expensesRoute which doesn't have any route typings. So if you change your default export from 'export default expensesRoute;' to export default mainRoute; it should work.

The following part of the documentation also adreses this: https://hono.dev/docs/guides/rpc#using-rpc-with-larger-applications.

[sureddibhargav]

Oh thank you so much for clearing it up and explaining how ts works here as well.🤝
Regarding the request flow, can you tell me if I am right =>
RPC constructs the api endpoint path based on the function I call, and makes the call to the server url that I specified while creating hc client.
i.e const client = hc<APIRoutesTypes>(server_url)
If I specify the server_url as "/", that would mean that hono RPC should make requests to the current origin.
So then, proxy setting in vite.config.js will intercept and proxy the request to my server url, as per my setup.

Is this the what happens in the background?

[Meess]

It's actually way simpler, hc is super dumb and it's implementation doesn't know or code anything about the API (it's al just typings). So what it does when you do client.some.path.to.your.endpoint.$get() simplified:

• it reads the name of what you try to access (done via javascript proxies, not to confuse with the proxy you want in your vite config to proxy to your backend), and puts it in an array, i.e. you get ["some", "path", "to", "your", "endpoint", "$get"]
• then checks the last argument and sees if it starts with an $, if so it takes what's after the $ and makes that the method for your request (in this case "get" so it will be a get request).
• Then it joins the rest with a /, so ["some", "path", "to", "your", "endpoint"] and you can see it back in the source code of the hono/client here:

  hono/src/client/client.ts

  Line 172 in ec58511

  const path = parts.join('/')

• So now you have "some/path/to/your/endpoint", it prefixes it with the baseUrl, so for hc("https://localhost:3000/") it will become "https://localhost:3000/some/path/to/your/endpoint", and fetches it.

It just uses normal url's to fetch the data, no fancy stuff, hc is just a very small tiny wrapper that gives your autocompletion based on the types so you less easily make a mistake which provides smooth DX.

So Yes, you can assume that your backend routes are just as you defined them, normally if you have an API you prefix all you api routes with /api/ so you can in vite.config just do:

export default defineConfig({
    server: {
        ...
        proxy: {
            '/api': 'http://localhost:4000', # or the port that your backend runs at
            ...
        },
    },
   ...
})

Although RPC sounds fancy, Hono makes it easy and just uses the url's and paths as you defined in your code, no fancy things and to be fair I think RPC sounds way to scarry for what it is.

Hope that helps, also if your question is answers, please mark it as answered :) so other people don't have to look into it

[sureddibhargav]

Thank you for the help.

[MatteoGauthier]

@Meess Thanks for this explanation. But when the deployment comes, how to handle the proxying since this settings is only working in developement ?

[Meess]

@MatteoGauthier, forget about the proxying, it's an implementation detail. Basically:

• The RPC typings make sure you are writing your code in the correct way (i.e. your build should fail on type errors)
• The frontend doesn't know anything about your backend
• Nothing of your backend is build / compiled into your frontend (i.e. the RPC is just a typing trick, and all typescript typings are gone when your TS code is compile to JS)

If it works in dev your endpoints should be correctly called in prod

[MatteoGauthier]

@Meess it's more clear to me now, thanks for your explanation