How to use hono/client with a different fetch client

[niklas-may]

What is the feature you are proposing?

I am trying to use hc with unjs/ofetch. Ofetch makes it quite easy to implement a jwt refresh flow, retries, interceptor, etc.. Technically, it does work fine like so:

    const client = hc<AppType>(this.#url, {
      fetch: (input: RequestInfo | URL, requestInit?: RequestInit) => {
        return this.fetch(
          input instanceof URL ? input.toString() : input,
          requestInit,
        )
      },
    })

The only issue is that the return of ofetch does not match hc's ClientResponse. This is due to the fact that ofetch unwraps the data by default. So await res.json() is not neccessary.

I do not see any way to update the hono's typing. I understand that hono is about working with web standards, but it would be super useful to work with a different client. Basically, what I would like to do is something like this:

// This does not work
declare module "hono/client" {
  export interface ClientResponse<T, U extends number = StatusCode, F extends ResponseFormat = ResponseFormat> = T {
}

This was already mentioned in #2542.

Are there any plans to make this possible or do you see a solution right away?

Thank you for the amazing project!

[niklas-may]

A temporary workaround is a helper function that can be passed into the then callback. This is obviously a dirty hack, but it does the trick with a reasonable overhead until a proper solution is found.

import type { ClientResponse } from "hono/client"
import { hc } from "hono/client"
import { ofetch } from "ofetch"
import type { AppType } from "@api"

const client = hc<AppType>("http://localhost:3000", {
  fetch: (input: RequestInfo | URL, requestInit?: RequestInit) => {
    return ofetch(input instanceof URL ? input.toString() : input, requestInit)
  },
})

function infere<T extends ClientResponse<any>>(data: T) {
  type JsonData = Awaited<ReturnType<(typeof data)["json"]>>
  return data as any as JsonData
}

// res is now typed correctly
const res = await client.api.auth.me.$get().then(infere)

I hope to find some time soon to explore a propper solution in the sourcecode.

[kedom1337]

This would be awesome to have

[fprl]

Having something like https://elysiajs.com/eden/fetch.html would be amazing. Type inference requires less work from TS server and the syntax is much better IMO, no need to learn anything, just use fetch syntax. See comparison:

// client
const roleRes = await client.orgs[':orgId'].members.me.role.$get({
  param: { orgId: organizationId },
})

// fetch
const { data, error } = await client('/api/orgs/:orgId/me/role', {
  params: { orgId: organizationId },
})