Using Hono RPC & Zod OpenAPI & Deno & React?

[p8952]

I've been using Hono in Production for a while. My API Server is running on Deno using the Zod OpenAPI middleware to provide validation and generate documentation. I also have a Client which is a server side Deno App which calls my API Server.

This has been working brilliantly, I have end-to-end type safety and automatically generated API Docs 🎉

I now need to create a second Client for my API, which is a React App, however I'm having trouble getting the Types to display in VSCode.

I've seen in the RPC Docs that it says:

For the RPC types to work properly in a monorepo, in both the Client's and Server's tsconfig.json files, set "strict": true in compilerOptions.

However since I'm using Deno there is no tsconfig.json for the Server.

I've made a simplified example to show the structure of my App and Repo: https://github.com/p8952/deno-hono-react

Can anyone point me to where I'm going wrong? Thanks!

[yusukebe]

Hi @p8952

A quick response. There's a difference between hono referred from npm:@hono/[email protected] and hono referred from hono/client. If it's different, the type inferring does not work well. This is a TypeScript limitation.

[p8952]

Hey @yusukebe,

Thanks for the reply, when you say there's a difference, did you mean in terms of the version?

I did notice after reading your comment that the version of hc/client imported by my server side Deno App (where type inference works) was =4.5.11, while the version in my React App was ^4.6.2.

However changing the React App version to =4.5.11 didn't resolve my issue.

[yusukebe]

Thanks for the reply, when you say there's a difference, did you mean in terms of the version?

This is a difficult problem. I'm not 100% sure regarding this issue, but though these are the same version, if both do not refer to the same "file," the error occurs. This is a super trouble issue.

[p8952]

I was able to resolve this 🎉

Create api/src/deno.json:

{
  "lock": false,
  "imports": {
    "@hono/zod-openapi": "npm:@hono/[email protected]",
    "hono/cors": "npm:[email protected]/cors"
  }
}

Update api/src/index.ts:

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

Update api/src/routes/testRoute.ts:

import { createRoute, type RouteHandler, z } from "@hono/zod-openapi";

Update web/tsconfig.app.json:

/* Deno Types */
"paths": {
  "@hono/zod-openapi": ["./node_modules/@hono/zod-openapi"],
  "hono/": ["./node_modules/hono/"]
}

Update web/package.json:

"dependencies": {
  "@hono/zod-openapi": "=0.16.0",
  "hono": "=4.5.11",
  "react": "^18.3.1",
  "react-dom": "^18.3.1"
}

I've updated my demonstration repo with the fix in case it's useful for anyone else: https://github.com/p8952/deno-hono-react