exemple for zod-openapi + rpc

WAAYZZz 🍀 · 2025-04-07T16:45:42.382Z

does anyone has a working exemple of https://hono.dev/examples/zod-openapi + https://hono.dev/docs/guides/rpc i know i have to chain routes, but i still got unknown (maybe because of zod-openapi ?)

A

Arjix•4/7/25, 4:51 PM

I've had great success with hono-openapi

But unfortunately it doesn't type-check the return type of your routes the same way zod-openapi does

W

WAAYZZz 🍀OP•4/7/25, 4:58 PM

i saw your post on other thread, maybe i will go for hono-openapi instead

W

WAAYZZz 🍀OP•4/7/25, 5:00 PM

(do you ahve simple exemple with hono-openapi + rpc ?)

A

Arjix•4/7/25, 5:06 PM

There is nothing special about that combination

A

Arjix•4/7/25, 5:06 PM

Just follow the docs for both of them

A

Arjix•4/7/25, 5:06 PM

It'll just work

A

Arjix•4/7/25, 5:07 PM

PS: for openapi generation, it will only include routes that have the middleware

describeRoute

describeRoute

describeRoute

describeRoute, routes w/o it won't show up on swagger for example

W

WAAYZZz 🍀OP•4/7/25, 5:20 PM

OK

A

ambergristle•4/7/25, 6:03 PM

@WAAYZZz

if you’re getting

unknown

unknown

unknown

unknown, it could be an issue w your implementation, or you might need to use generated types

A

ambergristle•4/7/25, 6:04 PM

Switching to

hono-openapi

hono-openapi

hono-openapi

hono-openapi has its advantages, but it won’t fix your type issue

W

WAAYZZz 🍀OP•4/7/25, 6:04 PM

i will share my code tomorrows, it's simple implementation for the moment

W

WAAYZZz 🍀OP•4/7/25, 6:06 PM

(juste a function returning a hono instance with pino and error handler set, and a zodopenapi route returnin fixed data

WWAAYZZz 🍀(juste a function returning a hono instance with pino and error handler set, and...

A

ambergristle•4/7/25, 6:12 PM

If you’re applying middleware in a custom function, that may be the problem. I’d recommend taking a look at the Hono factory helper

W

WAAYZZz 🍀OP•4/7/25, 9:49 PM

import { OpenAPIHono } from "@hono/zod-openapi";

type AppBindings = {
  Variables: {
    logger: PinoLogger;
  };
};

type AppOpenAPI = OpenAPIHono<AppBindings>;

function createInternalApp<T extends Env>() {
  const app = new OpenAPIHono<AppBindings & T>();
  app.use(pinoLogger());
  app.onError((error, c) => {
    if (error instanceof HTTPException) {
      return error.getResponse();
    }
    const logger = c.get("logger");
    logger.error(error);
    return c.json({ message: "Internal server error" }, 500);
  });
  return app;
}

const userRoutes = createInternalApp().basePath("/user");

// getUserRoute is a simple openApi object
userRoutes.openapi(getUserRoute, async (c) => {
  const user = await getUser();
  return c.json(user, 200);
});

const app = createInternalApp().route("/", userRoutes);
const client = hc<typeof app>("http://localhost:8787/");

import { OpenAPIHono } from "@hono/zod-openapi";

type AppBindings = {
  Variables: {
    logger: PinoLogger;
  };
};

type AppOpenAPI = OpenAPIHono<AppBindings>;

function createInternalApp<T extends Env>() {
  const app = new OpenAPIHono<AppBindings & T>();
  app.use(pinoLogger());
  app.onError((error, c) => {
    if (error instanceof HTTPException) {
      return error.getResponse();
    }
    const logger = c.get("logger");
    logger.error(error);
    return c.json({ message: "Internal server error" }, 500);
  });
  return app;
}

const userRoutes = createInternalApp().basePath("/user");

// getUserRoute is a simple openApi object
userRoutes.openapi(getUserRoute, async (c) => {
  const user = await getUser();
  return c.json(user, 200);
});

const app = createInternalApp().route("/", userRoutes);
const client = hc<typeof app>("http://localhost:8787/");

import { OpenAPIHono } from "@hono/zod-openapi";

type AppBindings = {
  Variables: {
    logger: PinoLogger;
  };
};

type AppOpenAPI = OpenAPIHono<AppBindings>;

function createInternalApp<T extends Env>() {
  const app = new OpenAPIHono<AppBindings & T>();
  app.use(pinoLogger());
  app.onError((error, c) => {
    if (error instanceof HTTPException) {
      return error.getResponse();
    }
    const logger = c.get("logger");
    logger.error(error);
    return c.json({ message: "Internal server error" }, 500);
  });
  return app;
}

const userRoutes = createInternalApp().basePath("/user");

// getUserRoute is a simple openApi object
userRoutes.openapi(getUserRoute, async (c) => {
  const user = await getUser();
  return c.json(user, 200);
});

const app = createInternalApp().route("/", userRoutes);
const client = hc<typeof app>("http://localhost:8787/");

import { OpenAPIHono } from "@hono/zod-openapi";

type AppBindings = {
  Variables: {
    logger: PinoLogger;
  };
};

type AppOpenAPI = OpenAPIHono<AppBindings>;

function createInternalApp<T extends Env>() {
  const app = new OpenAPIHono<AppBindings & T>();
  app.use(pinoLogger());
  app.onError((error, c) => {
    if (error instanceof HTTPException) {
      return error.getResponse();
    }
    const logger = c.get("logger");
    logger.error(error);
    return c.json({ message: "Internal server error" }, 500);
  });
  return app;
}

const userRoutes = createInternalApp().basePath("/user");

// getUserRoute is a simple openApi object
userRoutes.openapi(getUserRoute, async (c) => {
  const user = await getUser();
  return c.json(user, 200);
});

const app = createInternalApp().route("/", userRoutes);
const client = hc<typeof app>("http://localhost:8787/");

W

WAAYZZz 🍀OP•4/7/25, 9:54 PM

(code is splited, just grouped for demo)

W

WAAYZZz 🍀OP•4/8/25, 8:00 AM

ok i succed by better chaining

W

WAAYZZz 🍀OP•4/8/25, 8:00 AM

const app = createInternalApp().openapi(getUserRoute, async (c) => {
  const user = await getUser();
  return c.json(user, 200);
});

const app = createInternalApp().openapi(getUserRoute, async (c) => {
  const user = await getUser();
  return c.json(user, 200);
});

const app = createInternalApp().openapi(getUserRoute, async (c) => {
  const user = await getUser();
  return c.json(user, 200);
});

const app = createInternalApp().openapi(getUserRoute, async (c) => {
  const user = await getUser();
  return c.json(user, 200);
});

was needed

W

WAAYZZz 🍀OP•4/8/25, 8:29 AM

i migrate to hono-openapi and factories and it works

export type AppBindings = {
  Variables: {
    logger: PinoLogger;
  };
};

export default createFactory<AppBindings>({
  initApp: (app) => {
    app.use(pinoLogger());
    app.onError((error, c) => {
      if (error instanceof HTTPException) {
        return error.getResponse();
      }
      const logger = c.get("logger");
      logger.error(error);
      return c.json({ message: "Internal server error" }, 500);
    });
  },
});

const app = factoryWithLogs.createApp().get(
  "/",
  describeRoute({
    description: "Say hello to the user",
    responses: {
      200: {
        description: "Successful response",
        content: {
          "text/plain": { schema: resolver(responseSchema) },
        },
      },
    },
  }),
  zValidator("query", querySchema),
  async (c) => {
    const query = c.req.valid("query");
    const user = await getUser();
    return c.json(user, 200);
  }
);

export default userApp;

const app = factoryWithLogs.createApp().route("/user", UserApp);

export type AppBindings = {
  Variables: {
    logger: PinoLogger;
  };
};

export default createFactory<AppBindings>({
  initApp: (app) => {
    app.use(pinoLogger());
    app.onError((error, c) => {
      if (error instanceof HTTPException) {
        return error.getResponse();
      }
      const logger = c.get("logger");
      logger.error(error);
      return c.json({ message: "Internal server error" }, 500);
    });
  },
});

const app = factoryWithLogs.createApp().get(
  "/",
  describeRoute({
    description: "Say hello to the user",
    responses: {
      200: {
        description: "Successful response",
        content: {
          "text/plain": { schema: resolver(responseSchema) },
        },
      },
    },
  }),
  zValidator("query", querySchema),
  async (c) => {
    const query = c.req.valid("query");
    const user = await getUser();
    return c.json(user, 200);
  }
);

export default userApp;

const app = factoryWithLogs.createApp().route("/user", UserApp);

export type AppBindings = {
  Variables: {
    logger: PinoLogger;
  };
};

export default createFactory<AppBindings>({
  initApp: (app) => {
    app.use(pinoLogger());
    app.onError((error, c) => {
      if (error instanceof HTTPException) {
        return error.getResponse();
      }
      const logger = c.get("logger");
      logger.error(error);
      return c.json({ message: "Internal server error" }, 500);
    });
  },
});

const app = factoryWithLogs.createApp().get(
  "/",
  describeRoute({
    description: "Say hello to the user",
    responses: {
      200: {
        description: "Successful response",
        content: {
          "text/plain": { schema: resolver(responseSchema) },
        },
      },
    },
  }),
  zValidator("query", querySchema),
  async (c) => {
    const query = c.req.valid("query");
    const user = await getUser();
    return c.json(user, 200);
  }
);

export default userApp;

const app = factoryWithLogs.createApp().route("/user", UserApp);

export type AppBindings = {
  Variables: {
    logger: PinoLogger;
  };
};

export default createFactory<AppBindings>({
  initApp: (app) => {
    app.use(pinoLogger());
    app.onError((error, c) => {
      if (error instanceof HTTPException) {
        return error.getResponse();
      }
      const logger = c.get("logger");
      logger.error(error);
      return c.json({ message: "Internal server error" }, 500);
    });
  },
});

const app = factoryWithLogs.createApp().get(
  "/",
  describeRoute({
    description: "Say hello to the user",
    responses: {
      200: {
        description: "Successful response",
        content: {
          "text/plain": { schema: resolver(responseSchema) },
        },
      },
    },
  }),
  zValidator("query", querySchema),
  async (c) => {
    const query = c.req.valid("query");
    const user = await getUser();
    return c.json(user, 200);
  }
);

export default userApp;

const app = factoryWithLogs.createApp().route("/user", UserApp);

W

WAAYZZz 🍀OP•4/8/25, 9:21 AM

well encountred an other issue

https://github.com/rhinobase/hono-openapi/issues/91 but with hono-openapi this time

GitHub

using createFactory to add isn't detected by openapi · Issue #91 ...

Hi, import { createFactory } from "hono/factory"; import { describeRoute } from "hono-openapi"; import type { PinoLogger } from "hono-pino"; import { HTTPException } f...

WWAAYZZz 🍀well encountred an other issue 😄 https://github.com/rhinobase/hono-openapi/iss...

A

ambergristle•4/8/25, 10:49 AM

What do you mean by “detected”? Also, please avoid opening issues unless you know there’s a problem with the library

W

WAAYZZz 🍀OP•4/8/25, 10:52 AM

Doesn't appear in the openapi export

WWAAYZZz 🍀Doesn't appear in the openapi export

A

ambergristle•4/8/25, 10:53 AM

You mean

/a/test

/a/test

/a/test

/a/test doesn’t show up in the openapi spec generated at

/openapi

/openapi

/openapi

/openapi?

Aambergristle You mean `/a/test` doesn’t show up in the openapi spec generated at `/openapi`?

W

WAAYZZz 🍀OP•4/8/25, 10:55 AM

Absolutely, but using new hono instead of createfacorry makes it show up

WWAAYZZz 🍀Absolutely, but using new hono instead of createfacorry makes it show up

A

ambergristle•4/8/25, 11:02 AM

Interesting. I’ll try and repro

A

ambergristle•4/8/25, 11:02 AM

What runtime are you using?

W

WAAYZZz 🍀OP•4/8/25, 11:04 AM

Nodejs

W

WAAYZZz 🍀OP•4/8/25, 11:14 AM

i think problem is related to use factory with initApp

A

ambergristle•4/8/25, 12:15 PM

interesting. @WAAYZZz

i can repro the error. looks like it's the

onError

onError

onError

onError registration that's causing the issue

A

ambergristle•4/8/25, 12:55 PM

this is the line in

hono-openapi

hono-openapi

hono-openapi

hono-openapi that's preventing the docs from being generated: https://github.com/rhinobase/hono-openapi/blob/7f5d0affeb538045e3718933a550b00381ceb9bc/packages/core/src/openapi.ts#L93

A

ambergristle•4/8/25, 12:56 PM

not sure what it is about registering

onError

onError

onError

onError in

createApp

createApp

createApp

createApp that interferes with the

uniqueSymbol

uniqueSymbol

uniqueSymbol

uniqueSymbol

W

WAAYZZz 🍀OP•4/8/25, 1:02 PM

wow well played

W

WAAYZZz 🍀OP•4/8/25, 1:57 PM

last question, how to properly pass rpc client or typeof App to frontend in a monorepo architecture ?
i have this repo https://github.com/iNeoO/sirena
in

apps/backend/src/hc.ts

apps/backend/src/hc.ts

apps/backend/src/hc.ts

apps/backend/src/hc.ts client or AppType are well typed
but in

apps/frontend/src/lib/api/hc.ts

apps/frontend/src/lib/api/hc.ts

apps/frontend/src/lib/api/hc.ts

apps/frontend/src/lib/api/hc.ts everything becomes any

the only way i manged to make it works it's to not use factory, new app creation

GitHub

GitHub - iNeoO/sirena

Contribute to iNeoO/sirena development by creating an account on GitHub.

W

WAAYZZz 🍀OP•4/8/25, 2:10 PM

and even doing that, the first level of routes are well typed, but not the second (eg: user)

WWAAYZZz 🍀and even doing that, the first level of routes are well typed, but not the secon...

A

ambergristle•4/8/25, 2:13 PM

You’ll want to generate types during transpilation and use those with the client instead

A

ambergristle•4/8/25, 2:14 PM

You might need to update your

tsconfig

tsconfig

tsconfig

tsconfig

Aambergristle You might need to update your `tsconfig`

W

WAAYZZz 🍀OP•4/8/25, 2:21 PM

I'm trying this

W

WAAYZZz 🍀OP•4/8/25, 2:47 PM

thx, used pkgroll and it works now

A

ambergristle•4/8/25, 2:57 PM

i figured out what the issue is with

onError

onError

onError

onError

A

ambergristle•4/8/25, 2:58 PM

i added the details to the issue you opened for reference

A

ambergristle•4/8/25, 3:02 PM

i'm actually not sure whether i'd consider this a bug/edge-case

A

ambergristle•4/8/25, 3:02 PM

its certainly an unexpected behavior

W

WAAYZZz 🍀OP•4/8/25, 3:04 PM

thx for your huge help

A

ambergristle•4/8/25, 3:04 PM

happy to help!