Hono RPC client - types inferred incorrectly

[pjeziorowski]

What version of Hono are you using?

4.6.2

What runtime/platform is your app running on?

Bun

What steps can reproduce the bug?

export type PreferencesDTO = {
  userId: string
  newMessages: boolean
  newConnectionRequests: boolean
  matchSuggestionsOrUpdates: boolean
  productUpdates: boolean
  createdAt: string
  updatedAt: string | null
}

const preferences: PreferencesDTO = {...}

return c.json({
  data: preferences
}, 200) ----> The "output" of this gets inferred as "any" in the client:

What is the expected behavior?

Types for the basic JS types are inferred correctly

What do you see instead?

Output type in the RPC client is of type any

Additional information

If you cast your output type like this

return c.json({
  data: preferences
}, 200) as {
        newMessages: boolean
        newConnectionRequests: boolean
        matchSuggestionsOrUpdates: boolean
        productUpdates: boolean
      } 

then it's fine, but it's super inconvenient to be forced to cast types like this

[pjeziorowski]

I found the issue!

I'm using a monorepo with this structure:

• apps
  • backend
  • frontend
• packages
  • shared

In the shared package, I had stored some basic utility types. It turned out that importing these into the backend and returning data that had been wrapped or transformed by these types/functions was causing problems with type inference. Relocating the shared code directly into the backend resolved the issue.

Question - Do I have to set something up for the type inference to work fine without moving the shared code directly to the backend part?

[yusukebe]

HI @pjeziorowski

I need to look into your actual project to find the answer. But, it's not a bug of hono and the problem of setting the project though it's a bad issue for us. So, honestly, I was hoping you could talk about this on Discussions or Discord.

[detarkende]

I have a similar situation in this repo.

When I create a file src/client/api/api-client.ts, with this content:

import { hc } from 'hono/client';
import type { ApiRoutes } from 'src/server/index';

export const client = hc<ApiRoutes>('/');

then I see this issue, that the $post's arguments are any:

even though ApiRoutes is working in src/server/index.ts.

Does anyone know what could be the issue? I tried changing the import to make sure that the index.ts resolution isn't the issue and played around with the tsconfigs, but it didn't change.

[pjeziorowski]

@detarkende, have you set up composite and references in your monorepo tsconfigs?

I found out that setting this up properly makes the inference work reliably.

[detarkende]

@pjeziorowski You're right, that fixed it! Thank you, I have been stuck on this issue for days now 🎉

Btw, if anyone is in the same situation, this video helped me: https://www.youtube.com/watch?v=S-jj_tifHl4

I needed to set the "composite" config to true in the backend, and reference the backend project in the frontend's tsconfig.

[zxt-tzx]

@pjeziorowski You're right, that fixed it! Thank you, I have been stuck on this issue for days now 🎉

Btw, if anyone is in the same situation, this video helped me: https://www.youtube.com/watch?v=S-jj_tifHl4

I needed to set the "composite" config to true in the backend, and reference the backend project in the frontend's tsconfig.

just wanna say thanks, this helped solve my problem! just wanna add for anyone else who ran into additional error that this has been helpful (TLDR: you cannot use tsc --noEmit, just let it emit to a gitignored folder)

[cramosc]

Something seems to have changed in version 4.6.5. Version 4.6.4 infers correctly the type of the hono client but not anymore in version 4.6.5

[yusukebe]

@cramosc

Can you share a minimal project to reproduce it? In my understanding, this issue is solved.

[cramosc]

@yusukebe
Sure, here is a minimal example: https://github.com/cramosc/hono-client-example
when running npx tsc --build I get following error:

client/api.ts:6:23 - error TS2339: Property 'api' does not exist on type '{ "*": ClientRequest<{ $get: { input: {}; output: {}; outputFormat: string; status: StatusCode; }; }>; }'.

6 const api = apiClient.api;

If I install hono@4.6.4 instead, then typescript runs without errors.

[yusukebe]

@cramosc

Thank you very much! It's reproduced.

Hi @m-shaka Can you take a look at this?