Using the RPC server in react client code?

[stephencweiss]

I'm trying to use the pattern described in the docs here.

I did see this conversation, which if I'm reading correctly suggests that the hc.client is not particularly compatible with this pattern? is that right?

The issues I'm currently facing:

1. Route grouping / discovery
2. Exporting the right types (I think this is why my client is broken)
3. Understanding how to populate the server's location in the client code.

// src/routes/signin

function makeClient<T extends Hono<Env, unknown, any>>() {
  return hc<T>(
    // TODO: Figure out how to make this work since we don't have access to deno on the client
    `http://localhost:8000`,
}
const client = makeClient<API>();

export default function Index() {

  const signInStart = useCallback(async () => {
    const res = await client.api.signin.$post({
      form: {
        toPhone: phoneNumber,
      },
    });
  }, [phoneNumber]);

  return ( /*...*/)
}

This works... except that the server's baseUrl is hard coded.

For the server code, I've done the following:

import { Hono, validator } from "hono";
import { z } from "zod";


export const signinAPI = new Hono()

const SigninRequestSchema = z.object({/*...*/});

const VerifyRequestSchema = z.object({/*...*/});

const SigninSuccessRequestSchema = z.object({/*...*/});

const signinIndex = signinAPI.post(
  "/",
  validator("form", (value, c) => {/*...*/}),
  async (c) => {
    /*...*/
    return c.jsonT({/*...*/}, 200);
  },
);

const signinVerify = signinAPI.post(
  "/verify",
  validator("form", (value, c) => {/*...*/}),
  async (c) => {
    /*...*/
    return c.jsonT({ /*...*/ }, 200);
  },
);

const signinSuccess = signinAPI.post(
  "/success",
  validator("form", (value, c) => { /*...*/ }),
  async (c) => {
    /*...*/
    return c.jsonT({ /*...*/ }, 200);
  },
);

export type SigninResponse = typeof signinIndex;
export type SigninVerifyResponse = typeof signinVerify;
export type SigninSuccessResponse = typeof signinSuccess;
export type SigninAPI =
  | SigninResponse
  | SigninVerifyResponse
  | SigninSuccessResponse;

Again, this works, but I found that if my basePath was not the full /api/signin then the client didn't detect the path correctly from the Hono server.

I think this is because I defined the type in the client as SigninAPI -- where the client only understands this portion of the server. Is that right?

My server is basically:

const app = new Hono();
/*...*/
app.route("/", api);
serve(app.fetch, {
  port: PORT,
  hostname: HOSTNAME,
  onListen: ({ hostname, port }) => {
    note(`server is listening on ${hostname}:${port}`);
  },
);

Where api (and the associated type API) s:

export type API = SigninAPI
export const api = new Hono().basePath("/api");
api.route("/signin", signinAPI);

I'm using Deno, though I don't think that actually makes a difference.

Any advice?

Specifically:

1. I'd like to be able to group routes more ergonomically
2. Is there a way to infer the type of the entire API (i.e., grouped routes) for the client
3. I'd like to understand the recommended way to set the server's path on the client (recognizing that I don't have access to the environment variables there)

Update:
Initially I thought I'd solved the routing/discovery, but realized only later that the client was broken. I'm still at a loss here.

[yusukebe]

Hi @stephencweiss,

To infer the path in the client correctly, we need to specify the base path for signinAPI like so:

export const signinAPI = new Hono().basePath('/api/signin')

Then you can directly add the route to app:

const app = new Hono()
app.route('/', signinAPI)

However, if you do this, you won't be able to achieve your desired grouping:

const app = new Hono().basePath('/api')
app.route('/signin', signinAPI)

This is a technical issue. So, I recommend two patterns:

1. Specify basePath first

const signinAPI = new Hono().basePath('/api/signin')

///

const client = hc<SigninAPI>()

///

const app = new Hono()
app.route('/', signinAPI)

2. Specify base path in the client

export const signinAPI = new Hono()

///

const client = hc<SigninAPI>('http://localhost:8000/api/signin')

///

const api = new Hono().basePath('/api')
api.route('/signin', signinAPI)

[stephencweiss]

thanks @yusukebe! I will test this out. To be clear, the two pattern are distinct options. You wouldn't do both (as that doesn't make sense), right?

[yusukebe]

Hi, I will not do both. For me, in that case, I'll choose only "1. Specify basePath first" pattern.