How to display server router docs on the client hover

is there a way to place ts docs an server router endpoints and have it show on the client side.

export const helloRouter = createTRPCRouter({
  /**
   * Says hello to a user
   * @param name - The person's name to greet
   * @returns A greeting message
   */
  sayHello: publicProcedure
    .input(z.object({ name: z.string() }))
    .query(({ input }) => `Hello ${input.name}!`)
});

export const helloRouter = createTRPCRouter({
  /**
   * Says hello to a user
   * @param name - The person's name to greet
   * @returns A greeting message
   */
  sayHello: publicProcedure
    .input(z.object({ name: z.string() }))
    .query(({ input }) => `Hello ${input.name}!`)
});

On front-end client

// ❌ This WON'T show the JSDoc on hover:
const greeting = await trpc.hello.sayHello.query({ name: "John" });
//                           ^^^^^^^^^^^^^^^^^^^
//                    No docs appear when hovering any of these

// ❌ This WON'T show the JSDoc on hover:
const greeting = await trpc.hello.sayHello.query({ name: "John" });
//                           ^^^^^^^^^^^^^^^^^^^
//                    No docs appear when hovering any of these

I am using hono-trpc

1 Reply

Alfonso Guerra•4w ago

Don't you need to add @trpc/tanstack-react-query to begin migrating queries to the new way?

How to display server router docs on the client hover

Did you find this page helpful?