Hono•6mo ago

How to use custom fetch method for Hono client?

I have a noob question. I used to use the axios library and want a similar experience with the Hono client, such as shorter syntax, automatic JSON transformation and interceptors. Some suggest using ky instead of axios, but I don't know how to integrate it. The documentation (https://hono.dev/docs/guides/rpc#custom-fetch-method) is unclear to me. Could I get any guidance or example code?

RPC - Hono

Ultrafast web framework for Cloudflare Workers, Fastly Compute, Deno, Bun, Vercel, Node.js, and others. Fast, but not only fast.

5 Replies

Nico•6mo ago

Hi @lessquo, So the custom fetch method is for frameworks or runtimes that provide their own version of fetch. Cloudflare does this, so does SvelteKit. For something like axios or ky I don't believe you could integrate into it, nor would you need to. With the Hono Client you can make request simply. Once you set up the client, you call the route and the then method. No need to pass a url. And sending data is very simple as well.

lessquoOP•6mo ago

Got it! Well, short syntax is not really important. But I really want the interceptors feature. This is what I usually do with axios:

export const api = axios.create({ baseURL: import.meta.env.VITE_API_URL });

api.interceptors.request.use(async config => {
  const idToken = await getIdToken();
  if (idToken) {
    config.headers.Authorization = `Bearer ${idToken}`;
  }
  return config;
});

api.interceptors.response.use(
  response => {
    if (['post', 'patch'].includes(response.config.method ?? '')) {
      queryClient.refetchQueries({ type: 'active' });
    }
    return response;
  },
  error => {
    if (error.response?.status === 401) {
      signOut();
    }
    return Promise.reject(error);
  },
);

export const api = axios.create({ baseURL: import.meta.env.VITE_API_URL });

api.interceptors.request.use(async config => {
  const idToken = await getIdToken();
  if (idToken) {
    config.headers.Authorization = `Bearer ${idToken}`;
  }
  return config;
});

api.interceptors.response.use(
  response => {
    if (['post', 'patch'].includes(response.config.method ?? '')) {
      queryClient.refetchQueries({ type: 'active' });
    }
    return response;
  },
  error => {
    if (error.response?.status === 401) {
      signOut();
    }
    return Promise.reject(error);
  },
);

and here's my Hono client:

export const api = hc<ApiType>(import.meta.env.VITE_API_URL, {
  headers: async () => ({ Authorization: `Bearer ${await getIdToken()}` }),
});

export const api = hc<ApiType>(import.meta.env.VITE_API_URL, {
  headers: async () => ({ Authorization: `Bearer ${await getIdToken()}` }),
});

As you can see, Hono client can replace axios for the baseURL and headers, but not for the auto refetch and error handling. So, no way to achieve this currently?

Nico•6mo ago

As far as I know, no I don't think there is any built in way to achieve this

lessquoOP•6mo ago

Okay thanks! I’ll share if I find any solution or workaround

Gg•3mo ago

sorry for sending a message months later but did you ever solve this?

Gaming

Programming

How to use custom fetch method for Hono client?