Hono•3mo ago

Sharing the app type from my hono api to my client in a monorepo

I'm trying to share types between my Hono API and Svelte app. Currently doing this:

// Hono app - apps/api/src/index.ts
import { Hono } from "hono";
const app = new Hono()
    .get("/", ...
    ...

export default app;
export type AppRouter = typeof app;

// Hono app - apps/api/src/index.ts
import { Hono } from "hono";
const app = new Hono()
    .get("/", ...
    ...

export default app;
export type AppRouter = typeof app;

// Svelte app - apps/web/...
import { hc } from "hono/client";
import type { AppRouter } from "../../../api/src/index.ts";
export const client = hc<AppRouter>("http://localhost:8787/");

// Svelte app - apps/web/...
import { hc } from "hono/client";
import type { AppRouter } from "../../../api/src/index.ts";
export const client = hc<AppRouter>("http://localhost:8787/");

Importing directly from another app like this feels off. What's a better way to share types in a Turborepo setup? Thanks!

8 Replies

Aditya Mathur•3mo ago

https://discord.com/channels/1011308539819597844/1012485912409690122/1279004068567715881

GgOP•3mo ago

thanks friend i didnt look into what you meant at first but I think you misunderstood my question the issue is that its an anti-pattern to import between apps in turborepo (and monorepos in general, I think) so i was basically wondering if theres maybe a way to like generate the type to a package, instead of the export type AppRouter = typeof app; (cuz it would also be an anti pattern to import the type from the app to the package)

Aditya Mathur•3mo ago

I think if you are just getting the types, it's all good but if you want you can create a package with all your hono routes and then use it in your frontend and backend.

Hangor•3mo ago

@Aditya Mathur Hey, can you please elaborate for a guy like me who doesn't have much experience setting up all the TS infra... Right now i have an npm monorepo with client/server folders. I export my Hono app's type like this: Then i import it on my client like this: But what i get is that types are not properly inferred on the client: However, on the server folder types are inferred properly:

Hangor•3mo ago

Sorry screenshots are messed up but i guess u get the point...

Hangor•3mo ago

Ok seems that the client can't infer types from Prisma since when i am doing the following it works..

Aditya Mathur•3mo ago

Shouldn't prisma generate auto gen these types for you tho? so is your issue resolved or are you still having trouble with this setup?

Hangor•3mo ago

I've finally fixed the issue, it was related to tsconfig in my monorepo, prisma had nothing to do with it... I had to enable composite: true in the server subrepo and add path reference in the client pointing to tsconfig in the server. Now it is working as expected 🙂 Thank you

Gaming

Programming

Sharing the app type from my hono api to my client in a monorepo