Zenn
🔥

Honoのfetchをカスタムする

2025/03/02に公開
Hono
tech

はじめに

最近、HonoのRPC機能を使って開発をしています。
その過程で、fetchを使う際にCookieの設定やログの記録を行いたい場面があり、方法を調べました。
RPC機能の基本的な解説については既に多くの記事があるため、本記事では割愛します。

fetchのカスタマイズ方法

HonoのRPCクライアントは、デフォルトでグローバルのfetch関数を使用してHTTPリクエストを送信します。
しかし、環境や用途によってはfetchの挙動をカスタマイズしたい場面があります。例えば：

  • 特定のヘッダー（認証トークンなど）を全てのリクエストに付与したい
  • レスポンスエラーやステータスコードに応じて共通の処理（リトライやログ出力など）を挟みたい
  • サーバーレス環境で他のサービス（別のワーカーなど）を呼び出すために特別なfetch関数を使いたい

こうした場合、HonoではRPCクライアント生成時に独自のfetch関数を差し替えることができます。hc関数の第二引数にオプションとしてfetchを渡すことで、以降そのクライアントが発行する全てのリクエストでカスタムfetchが使われます​。

カスタムfetch関数を指定する

実際にfetchをカスタマイズする方法を見てみます。

const client = hc<AppType>(baseURL, {
  fetch: customFetchFunction
})

ここでcustomFetchFunctionはfetchと同じインターフェース（引数にRequestInfo | URLとRequestInitを受け取り、Promise<Response>を返す関数）で実装します。カスタムfetch内では必要な処理を行った後、最終的に実際のHTTPリクエストを行うために通常のfetchを呼び出します。

カスタムfetchの実装例：ヘッダーの付与やログ出力

シンプルな例として、全てのリクエストにカスタムヘッダーを追加し、リクエストの情報をログ出力するfetch関数を作ってみます。

// 1. カスタムfetch関数の定義
const customFetch = async (
  input: RequestInfo | URL,
  requestInit?: RequestInit
) => {
  // 既存のヘッダーを保持しつつ、新しいヘッダーを追加
  const headers = new Headers(requestInit?.headers);
  headers.set("X-Custom-Header", "ExampleValue"); // カスタムヘッダーを追加

  // リクエストのURLやメソッドをログに出力（デバッグ用途）
  const method = requestInit?.method ?? "GET";
  console.log(`Request: ${method} ${input}`);

  // 実際のHTTPリクエストを実行（ヘッダーを差し替えてfetch）
  const response = await fetch(input, { ...requestInit, headers });

  // レスポンスステータスもログに出力
  console.log(`Response: ${response.status} ${response.statusText}`);
  return response;
};

// 2. クライアントを生成する際にカスタムfetchを適用
const client = hc<AppType>('https://api.example.com/', { fetch: customFetch })

上記のcustomFetch関数でやったこと

  • init（RequestInit）の中のヘッダーをHeadersオブジェクトにまとめる
  • X-Custom-Header: ExampleValueという独自ヘッダーを追加
  • コンソールにリクエストのメソッドとURLを出力
  • 通常のfetchを呼び出してHTTPリクエスト
  • レスポンスが返ってきたらステータスコードとステータスメッセージもログ出力
  • レスポンスを呼び出し元に返す

これでclientから発行するリクエストはすべてこのロジックを経由するようになります。例えば、client.posts.$post({ ... })と呼ぶと、実際には上記のcustomFetchが実行され、コンソールにログが出力されつつ、X-Custom-Header付きのリクエストがhttps://api.example.com/postsに送信されます。

まとめ

HonoのRPC機能は、サーバーとクライアント間でAPIの型定義を共有できる強力な機能です。fetchのカスタマイズにより、その振る舞いを自在に拡張できます。共通のヘッダー付与やログ記録、エラー処理の集中管理から、認証・セッション管理まで、カスタムfetchのユースケースは多岐にわたります。

ぜひHonoのRPC機能とカスタムfetchを活用して、快適な開発を体験してみてください。

参考にした記事等

https://hono.dev/docs/guides/rpc#custom-fetch-method
https://github.com/orgs/honojs/discussions/3222
https://qiita.com/john-Q/items/394ba6ffdba08580f1bc#custom-fetch-method

Discussion