Generic response handler for hono/client

[paolostyle]

Hi, I need some help figuring out a way to handle errors when using hono/client. Generally my API is purely JSON based and it either responds with a 2xx or 4xx. So for example my route might look like this:

  .get('/me', cookieAuth, async (c) => {
    const identity = c.get('identity');

    if (!identity) {
      // this will never happen but I need to this to get the right types
      return c.json({ errorMessage: 'Unauthorized' }, 401);
    }

    return c.json({ ok: true }, 200);
  })

This one actually showcases another problem but I believe #2719 would fix it.

Regardless, my issue is that I'm generating a .d.ts file which I can later use in a separate frontend repo and I'm not sure how the order of the responses is determined, but it might be either:

{
    $get: {
        input: {},
        output: { ok: true },
        outputFormat: "json";
        status: 200;
    } | {
        input: {},
        output: {
            errorMessage: string;
        };
        outputFormat: "json";
        status: 401;
    }
}

or

{
    $get: {
        input: {},
        output: { errorMessage: string };
        outputFormat: "json";
        status: 401;
    } | {
        input: {},
        output: { ok: true },
        outputFormat: "json";
        status: 200;
    };
}

I don't know how it's determined, the order of responses in the implementation doesn't seem to matter, sometimes it's one way, sometimes the other (usually 200 is first). In general I believe this should not matter, or at least I thought so.

I wrote a generic function that would allow me to not handle the error response every time (I use the hc with react-query so I need to throw on 4xx/5xx to get proper error handling):

export const responseHandler = async <T>(
  response:
    | ClientResponse<T, SuccessStatusCode, 'json'>
    | ClientResponse<
        { errorMessage: string },
        ClientErrorStatusCode | ServerErrorStatusCode,
        'json'
      >
) => {
  if (!response.ok) {
    const { errorMessage } = await response.json();
    throw new Error(errorMessage);
  }

  return response.json();
};

The problem is that it works great if the 200 response is first in the union in d.ts, but if 401 is first, it doesn't work:

Argument of type '<T>(response: ClientResponse<T, SuccessStatusCode, 'json'> | ClientResponse<{    errorMessage: string;}, ClientErrorStatusCode | ServerErrorStatusCode, 'json'>) => Promise<BlankRecordToNever<T>>' is not assignable to parameter of type '(value: ClientResponse<{ errorMessage: string; }, 401, "json"> | ClientResponse<{ ok: true; }, 200, "json">) => { errorMessage: string; } | PromiseLike<{ errorMessage: string; }>'.
  Types of parameters 'response' and 'value' are incompatible.
    Type 'ClientResponse<{ errorMessage: string; }, 401, "json"> | ClientResponse<{ ok: true; }, 200, "json">' is not assignable to type 'ClientResponse<{ errorMessage: string; }, ClientErrorStatusCode | ServerErrorStatusCode, "json"> | ClientResponse<{ errorMessage: string; }, SuccessStatusCode, "json">'.
      Type 'ClientResponse<{ ok: true; }, 200, "json">' is not assignable to type 'ClientResponse<{ errorMessage: string; }, ClientErrorStatusCode | ServerErrorStatusCode, "json"> | ClientResponse<{ errorMessage: string; }, SuccessStatusCode, "json">'.
        Type 'ClientResponse<{ ok: true; }, 200, "json">' is not assignable to type 'ClientResponse<{ errorMessage: string; }, SuccessStatusCode, "json">'.
          Property 'errorMessage' is missing in type '{ ok: true; }' but required in type '{ errorMessage: string; }'.ts(2345)

It's pretty shocking to me and it's probably not an issue with Hono itself but you guys are TypeScript magicians so perhaps you'll have an idea how to solve it, for now the only solution is to just copy-paste the contents of that responseHandler function to .then() and then it works. But it's really baffling why that happens.