Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

RPC - sharing of api specification between server and client #215

Open
Kalli opened this issue Dec 15, 2024 · 0 comments
Open

RPC - sharing of api specification between server and client #215

Kalli opened this issue Dec 15, 2024 · 0 comments

Comments

@Kalli
Copy link

Kalli commented Dec 15, 2024

Thanks for a neat library! I've been building an app starting on the Cloudflare open api template which uses chanfana and hono.

I quite like the setup and the api docs get generated and served nicely. But I'd also like to use hono's rpc client for testing and to consume the api and here I am unable to get the autocomplete and types to function properly.

I don't fully understand the magic behind the spec sharing there, so I'm not 100% sure which type you need to export to get the router. Using the chanfana HonoOpenAPIRouterType compiles without error but doesn't share the spec correctly with the client.

// add this to index.ts
export type AppType = typeof openapi

What I then get in the client:

image

What I want (and how it works if I use hono.route to set up the routes, as per the hono docs):

image

I thought maybe this was related to the issue about nested routes (#179) (which you also need to handle in plain hono), but removing the /api path prefix does not fix it for me.

Am I missing something here or is this not possible when using chanfana and class based endpoints?

Full steps to reproduce:

  1. Create a template app using the Cloudflare cli:
npm create cloudflare@latest
╭ Create an application with Cloudflare Step 1 of 3
│
├ In which directory do you want to create your application?
│ dir ./shiny-disk-6177
│
├ What would you like to start with?
│ category Application Starter
│
├ Which template would you like to use?type API starter (OpenAPI compliant)
│
├ Copying template files
│ files copied to project directory
│
├ Installing dependencies
│ installed via `npm install`
│
╰ Application created
  1. Add the following to your index.ts to export the route type to share the api spec with a client:
export type AppType = typeof openapi
  1. Then try adding a client.ts file to consume the api with the following code:
import { hc } from "hono/client";
import { AppType } from "index";
const client = hc<AppType>("http://localhost:8787");

Your IDE will not surface the same autocomplete and type information as if you had just used pure hono.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant