cloudflare / cloudflare/chanfana
RPC - sharing of api specification between server and client
- Dominant language
- TypeScript
- Stars
- 766
- Forks
- 70
- Avg merge
- 25m
- Merged PRs (30d)
- 4
Description
Thanks for a neat library! I've been building an app starting on the Cloudflare [open api template](https://github.com/cloudflare/workers-sdk/blob/6cac35131c0bdf93995f317b977cfdb2e9a4902c/packages/create-cloudflare/templates/openapi/ts/README.md#L4) 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](https://hono.dev/docs/guides/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.
```ts
// add this to index.ts
export type AppType = typeof openapi
```
What I then get in the client:
What I want (and how it works if I use `hono.route` to set up the routes, as per the [hono docs](https://hono.dev/docs/guides/rpc#client)):
I thought maybe this was related to the issue about nested routes (#179) (which you also need to handle in [plain hono](https://hono.dev/docs/guides/rpc#using-rpc-with-larger-applications)), 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:
```bash
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
```
2. Add the following to your `index.ts` to export the route type to share the api spec with a client:
```ts
export type AppType = typeof openapi
```
3. Then try adding a client.ts file to consume the api with the following code:
```ts
import { hc } from "hono/client";
import { AppType } from "index";
const client = hc("http://localhost:8787");
```
Your IDE will not surface the same autocomplete and type information as if you had just used pure hono.
Contributor guide
Research direction
Reproduce the problem from the Cloudflare OpenAPI template, then inspect index.ts and client.ts alongside Hono's RPC client documentation. Verify how exporting typeof openapi affects hc; done means the client exposes the same route autocomplete and type information as the pure Hono setup.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- api
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100