honojs
Type for `output` in hono client route getting dropped
What version of Hono are you using?
^4.4.7
What runtime/platform is your app running on?
Bun / Vite
What steps can reproduce the bug?
The Setup:
- A
/apifolder which has a basic Hono server with some routes (uses bun) - A
/frontendfolder which has a react app (uses vite)
The goal:
Use the hono/client in a react useQuery hook to fetch data.
What's wrong:
Somewhere along the way, the hc object is not being properly typed.
In the /api code, notice if I hover over the type of ExecutionsRoute we can see all attributes of output:
In the /frontend code, notice if I hover over the type of client, we can see the attributes of output getting dropped:
What's wild is that if I jump-to-definition of ExecutionsRoute from the /frontend folder, it correctly brings me to /api.
What is the expected behavior?
The typing of the client which uses hono/client should preserve the types of the input and outputs.
What do you see instead?
The output is getting cast to
[x: string]: any;
When it should be
{
id: string;
prompt: string;
jobId: string;
done: boolean;
result: {
url?: string | undefined;
} | null;
createdAt: string;
updatedAt: string;
}
Additional information
Could it be the difference in build tools (bun vs. vite)? I've tried restarting the TS lang server on VSCode multiple times.
I have narrowed it down, something about createInsertSchema from the drizzle-zod package, combined with zValidator("json", test) doesn't work well together.
Will not work:
import { createInsertSchema } from "drizzle-zod";
export const insertExecutionSchema = createInsertSchema(executionTable);
export const executionsRoute = new Hono()
.post("/", zValidator("json", insertExecutionSchema), async (c) => {
const execution = c.req.valid("json");
c.status(201);
return c.json({ hello: "world" });
});
Will work:
const test = z.object({
body: z.string(),
});
export const executionsRoute = new Hono()
.post("/", zValidator("json", test), async (c) => {
const execution = c.req.valid("json");
c.status(201);
return c.json({ hello: "world" });
});
@shahzeb1
This is a TypeScript type matter, not dependent on a runtime. It does not seem to be a bug. Could you ask this on Discussion or provide a minima project to reproduce it?
~~I have the same problem. Do you have any relevant GitHub Discussion URLs, etc.?~~
↓This URL helped me solve the problem. https://github.com/honojs/hono/issues/3485
