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

How to use hono/client with a different fetch client #3699

Open
niklas-may opened this issue Nov 22, 2024 · 2 comments
Open

How to use hono/client with a different fetch client #3699

niklas-may opened this issue Nov 22, 2024 · 2 comments
Labels
enhancement New feature or request.

Comments

@niklas-may
Copy link

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 niklas-may added the enhancement New feature or request. label Nov 22, 2024
@niklas-may niklas-may changed the title How to use hc with a diffent fetch client How to use hono/client with a diffent fetch client Nov 22, 2024
@niklas-may niklas-may changed the title How to use hono/client with a diffent fetch client How to use hono/client with a different fetch client Nov 22, 2024
@niklas-may
Copy link
Author

niklas-may commented Nov 24, 2024

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
Copy link

This would be awesome to have

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

No branches or pull requests

2 participants