Hono

If you want to generate a hono, define the client property to hono and a template of Hono will be generated in the target file and directory. You can check Hono.

Example of orval.config.js

1 module.exports = {
2   petstore: {
3     input: {
4       target: './petstore.yaml',
5     },
6     output: {
7       mode: 'split',
8       client: 'hono',
9       target: 'src/petstore.ts',
10       override: {
11         hono: {
12           handlers: 'src/handlers',
13         },
14       },
15     },
16   },
17 };

Currently, Please note that the hono client only works in split mode.

generate template

orval generates a file like the following:

1 src/
2 ├── handlers
3 │   ├── createPets.ts
4 │   ├── listPets.ts
5 │   ├── showPetById.ts
6 │   └── updatePets.ts
7 ├── index.ts
8 ├── petstore.context.ts
9 ├── petstore.schemas.ts
10 ├── petstore.ts
11 ├── petstore.validator.ts
12 └── petstore.zod.ts

• petstore.ts: Initializes hono and defines endpoints.
• handlers: Contains templates for each endpoint.
• petstore.schemas.ts: Defines request and response schemas.
• petstore.validator.ts: Implements hono validator.
• petstore.zod.ts: Defines schemas using zod for validation.
• petstore.context.ts: Defines context for endpoints.

implement endpoint proccess to handler

Orval generates a handler template for Hono. For example, check out listPets.ts. Validation is defined for request and response. Only the actual processing is not implemented.

1 import { createFactory } from 'hono/factory';
2 import { zValidator } from '../petstore.validator';
3 import { ListPetsContext } from '../petstore.context';
4 import { listPetsQueryParams, listPetsResponse } from '../petstore.zod';
5 
6 const factory = createFactory();
7 
8 export const listPetsHandlers = factory.createHandlers(
9   zValidator('query', listPetsQueryParams),
10   zValidator('response', listPetsResponse),
11   async (c: ListPetsContext) => {},
12 );

You can implement the API just by defining the response according to the response schema.

1 import { createFactory } from 'hono/factory';
2 import { zValidator } from '../petstore.validator';
3 import { ListPetsContext } from '../petstore.context';
4 import { listPetsQueryParams, listPetsResponse } from '../petstore.zod';
5 
6 const factory = createFactory();
7 
8 export const listPetsHandlers = factory.createHandlers(
9   zValidator('query', listPetsQueryParams),
10   zValidator('response', listPetsResponse),
11   async (c: ListPetsContext) => {
12 +    return c.json([
13 +      {
14 +        id: 1,
15 +        name: 'doggie',
16 +      },
17 +    ]);
18   },
19 );

run Hono dev server

you can run and check by wrangler dev commnad. The entrypoint is src/petstore.ts instead of src/index.ts.

1 yarn wrangler dev src/petstore.ts
2 curl http://localhost:8787/pets #=> [{"id":1,"name":"doggie"}]

Checkout here the full example. And if you want to develop both the frontend and backend with Typescript using Hono, fetch, and Next.js, please check here as well.