Hono•3w ago

Hono RPC issue with .use

When I use Hono Rpc it only works if I remove .use

15 Replies

JokerOP•3w ago

When I remove the .use it works without any problems it's only for the intelisense/types, the request works

ambergristle•3w ago

hey @Joker! is OpenAPIHono a custom class? it's hard to say what the issue is w/o knowing what's going on in there

JokerOP•3w ago

it's from @hono/zod-openapi

ambergristle•3w ago

ahhhh interesting i haven't seen zod-openapi used that way you're passing the app type to the hono client, yeah?

JokerOP•3w ago

yes

JokerOP•3w ago

ambergristle•3w ago

hm. this seems to work fine for me:

import { OpenAPIHono } from '@hono/zod-openapi'
import { hc } from 'hono/client'

const secret = new OpenAPIHono()
  .get('/secret', (c) => c.text('ok'))

const app = new OpenAPIHono()
  .use()
  .route('/', secret)

const client = hc<typeof app>('')

const getSecret = () => client.secret.$get()

import { OpenAPIHono } from '@hono/zod-openapi'
import { hc } from 'hono/client'

const secret = new OpenAPIHono()
  .get('/secret', (c) => c.text('ok'))

const app = new OpenAPIHono()
  .use()
  .route('/', secret)

const client = hc<typeof app>('')

const getSecret = () => client.secret.$get()

even if you add an intermediate api app what's the actual typescript error you're getting? it's helpful to include these, or any error logs, when posting questions like this

JokerOP•3w ago

property 'secret' does not exist on type '{ auth: { register: { "send-registration-code": ClientRequest<{ $post: { input: { json: { email: string; agree: boolean; }; }; output: {}; outputFormat: string; status: 200; }; }>; }; }; } & { ...; } & { ...; } & { ...; }'.ts(2339)roperty 'secret' does not exist on type '{ auth: { register: { "send-registration-code": ClientRequest<{ $post: { input: { json: { email: string; agree: boolean; }; }; output: {}; outputFormat: string; status: 200; }; }>; }; }; } & { ...; } & { ...; } & { ...; }'.ts(2339)

property 'secret' does not exist on type '{ auth: { register: { "send-registration-code": ClientRequest<{ $post: { input: { json: { email: string; agree: boolean; }; }; output: {}; outputFormat: string; status: 200; }; }>; }; }; } & { ...; } & { ...; } & { ...; }'.ts(2339)roperty 'secret' does not exist on type '{ auth: { register: { "send-registration-code": ClientRequest<{ $post: { input: { json: { email: string; agree: boolean; }; }; output: {}; outputFormat: string; status: 200; }; }>; }; }; } & { ...; } & { ...; } & { ...; }'.ts(2339)

ambergristle•3w ago

thanks can you share the routing code for the main app? or at least /api the error suggests that /secret isn't being registered

JokerOP•3w ago

sure

const routes = app
    .route('/', authApp)
    .route('/', secretApp);

export type AppType = typeof routes;

export { app };

// OTHER FILE:
import { secret } from '@/server/routes/secret/secret';
import type { ContextVariables } from '@/server/types';
import { OpenAPIHono } from '@hono/zod-openapi';

export const secretApp = new OpenAPIHono<{ Variables: ContextVariables }>()
    .use(async (c, next) => {
        const user = c.get('user');
        if (!user) {
            c.status(401);
            return c.body(null);
        }

        return next();
    })
    .route('/', secret);

// OTHER FILE:

import type { ContextVariables } from '@/server/types';
import { createRoute, OpenAPIHono, z } from '@hono/zod-openapi';

export const secret = new OpenAPIHono<{ Variables: ContextVariables }>().openapi(
    createRoute({
        method: 'get',
        path: '/api/secret',
        tags: ['Secret'],
        summary: 'Shhh...',
        responses: {
            200: {
                description: 'Success',
                content: {
                    'application/json': {
                        schema: z
                            .object({
                                message: z.string(),
                                email: z.string().email(),
                            })
                            .openapi('SecretResponse'),
                    },
                },
            },
        },
    }),
    async c => {
        const user = c.get('user')!;

        return c.json({
            message: 'Secret Message',
            email: user.email,
        });
    }
);

const routes = app
    .route('/', authApp)
    .route('/', secretApp);

export type AppType = typeof routes;

export { app };

// OTHER FILE:
import { secret } from '@/server/routes/secret/secret';
import type { ContextVariables } from '@/server/types';
import { OpenAPIHono } from '@hono/zod-openapi';

export const secretApp = new OpenAPIHono<{ Variables: ContextVariables }>()
    .use(async (c, next) => {
        const user = c.get('user');
        if (!user) {
            c.status(401);
            return c.body(null);
        }

        return next();
    })
    .route('/', secret);

// OTHER FILE:

import type { ContextVariables } from '@/server/types';
import { createRoute, OpenAPIHono, z } from '@hono/zod-openapi';

export const secret = new OpenAPIHono<{ Variables: ContextVariables }>().openapi(
    createRoute({
        method: 'get',
        path: '/api/secret',
        tags: ['Secret'],
        summary: 'Shhh...',
        responses: {
            200: {
                description: 'Success',
                content: {
                    'application/json': {
                        schema: z
                            .object({
                                message: z.string(),
                                email: z.string().email(),
                            })
                            .openapi('SecretResponse'),
                    },
                },
            },
        },
    }),
    async c => {
        const user = c.get('user')!;

        return c.json({
            message: 'Secret Message',
            email: user.email,
        });
    }
);

ambergristle•3w ago

oh dang. i think i remember an issue about this in any case, the solve is to explicitly pass the route param to use app.use('*', ...)

JokerOP•3w ago

yeah i think i will do that and then make an if check yeah worked

ambergristle•3w ago

this example could help you lose a layer, but i wouldn't expect that to make a difference: https://github.com/honojs/middleware/issues/379#issuecomment-1929994758

GitHub

How to Insert Custom Middleware Using @hono/zod-openapi ? · Issue #...

I'm trying to use custom middleware with @hono/zod-openapi to enhance request handling by inserting custom logic and types. However, it seems like the current setup does not allow middleware to...

ambergristle•3w ago

from what i've seen, all the hono examples show either the path arg set (for use) or apply the middleware without directly chaining i could swear there was an issue, maybe with hono itself, related to * middleware typing, but i've been unable to dig it up

ambergristle•3w ago

could have been this one, but seems like the inverse problem: https://github.com/honojs/hono/issues/3122

GitHub

4.4.12 breaks client typing when using use with a path · Issue #312...

What version of Hono are you using? 4.4.12 What runtime/platform is your app running on? Node What steps can reproduce the bug? Stackblitz of the reproduction: https://stackblitz.com/edit/hono-clie...

Gaming

Programming

Hono RPC issue with .use

Did you find this page helpful?