H
Hono•3w ago
JustKira

How to change to FETCH client of Hono to Ky.js or Axios

i like ky.js i wanted to make rpc use ky.js other than normal fetch method im using it with sveltekit 
export const honoHandle: Handle = async ({ event, resolve }) => {
    const client = hc<AppType>('/', { fetch: event.fetch });
    event.locals.api = client.api.hono;

    return resolve(event);
};
export const honoHandle: Handle = async ({ event, resolve }) => {
    const client = hc<AppType>('/', { fetch: event.fetch });
    event.locals.api = client.api.hono;

    return resolve(event);
};
why I am asking this because i start to get annoyed for await request.json() pattern and error handling there some other cool packages like Effect that makes fetching way ezy and handling its error without try catch so how do i do that?
11 Replies
ambergristle
ambergristle•3w ago
have you tried this? 
import ky from 'ky';

const client = hc<AppType>('/', {
  fetch: ky,
});
import ky from 'ky';

const client = hc<AppType>('/', {
  fetch: ky,
});
JustKira
JustKiraOP•3w ago
ya but it seems doesn't change anything 
    const createUserResult = await locals.api.v0.user.$post({
                json: form.data
            });

            const result = await createUserResult.json();
    const createUserResult = await locals.api.v0.user.$post({
                json: form.data
            });

            const result = await createUserResult.json();
still the same 
// Docs
import ky from 'ky';

const user = await ky('/api/user').json();
// Docs
import ky from 'ky';

const user = await ky('/api/user').json();
i expect it to look like this 
    const createUserResult = await locals.api.v0.user.$post({
                json: form.data
            }).json()
    const createUserResult = await locals.api.v0.user.$post({
                json: form.data
            }).json()
ambergristle
ambergristle•3w ago
ah, gotcha
JustKira
JustKiraOP•3w ago
not sure how to get it working
ambergristle
ambergristle•3w ago
i don't think you can easily ky accepts this call signature 
<T>(url: Input, options?: Options): ResponsePromise<T>;
<T>(url: Input, options?: Options): ResponsePromise<T>;
which is what the hono client is using: https://github.com/honojs/hono/blob/035c2d72c0769442309978501fadcf40b6f56436/src/client/client.ts#L112C27-L112C32
JustKira
JustKiraOP•3w ago
can u explain what u are trying to do.
ambergristle
ambergristle•3w ago
i sort of misunderstood your question, but the short answer is that you'll need to write your own function to handle responses
JustKira
JustKiraOP•3w ago
wrench looks cool but how does that work with hono Are you suggesting that I need to build it myself, or is there no way I can use an existing client?
ambergristle
ambergristle•3w ago
it doesn't work w hono, sorry
JustKira
JustKiraOP•3w ago
sadge
ambergristle
ambergristle•3w ago
the way the existing client is typed, the response is always going to be Response, so you'll have to unpack it yourself you could do something like this 
const unpackResponse = <
  P,
  T, 
  U extends number = StatusCode, 
>(
  request: (...params: P[]) => Promise<ClientResponse<T, U, 'json'>>,
  onError: (error: unknown) => void,
) => {
  return async (params: P[]) => {
    try {
      return await request(...params)
        .then((req) => req.json())
    } catch (error) {
      onError(error)
    }
  }
}
const unpackResponse = <
  P,
  T, 
  U extends number = StatusCode, 
>(
  request: (...params: P[]) => Promise<ClientResponse<T, U, 'json'>>,
  onError: (error: unknown) => void,
) => {
  return async (params: P[]) => {
    try {
      return await request(...params)
        .then((req) => req.json())
    } catch (error) {
      onError(error)
    }
  }
}
but i haven't actually gotten the types to work here we go 
const unpackResponse = <
  P,
  T, 
  U extends number = StatusCode, 
>(
  request: (params: P, options?: ClientRequestOptions<unknown> | undefined) => Promise<ClientResponse<T, U, 'json'>>,
  onError: (error: unknown) => void,
) => {
  return async (params: P) => {
    try {
      return await request(params)
        .then((req) => req.json())
    } catch (error) {
      onError(error)
    }
  }
}
const unpackResponse = <
  P,
  T, 
  U extends number = StatusCode, 
>(
  request: (params: P, options?: ClientRequestOptions<unknown> | undefined) => Promise<ClientResponse<T, U, 'json'>>,
  onError: (error: unknown) => void,
) => {
  return async (params: P) => {
    try {
      return await request(params)
        .then((req) => req.json())
    } catch (error) {
      onError(error)
    }
  }
}
const request = unpackResponse(client.index.$get, (error) => {})
const request = unpackResponse(client.index.$get, (error) => {})
i'm sure you can improve on it for your use-case

Did you find this page helpful?