Skip to main content

event オブジェクトは標準の Fetch API のように振る舞う fetch メソッドを持っていますが、以下のスーパーパワーを備えています:

  • 受け取ったリクエストから cookieauthorization を継承するので、サーバー上で認証付きのリクエストを行うことができます
  • サーバー上で相対リクエストを行うことができます (通常、fetch をサーバーで使用する場合はオリジンを持つ URL が必要です)
  • 内部リクエスト (例えば +server.js ルートに対するリクエスト) は、サーバー上で実行される場合は直接ハンドラ関数を呼び出すため、HTTP 呼び出しのオーバーヘッドがありません

この動作は handleFetch hook で変更することができます。デフォルトではこのようになります:

src/hooks.server
export async function handleFetch({ event, request, fetch }) {
	return await fetch(request);
}

例えば、src/routes/a/+server.js に対するリクエストに対し、代わりに src/routes/b/+server.js のレスポンスを返すことができます:

src/hooks.server
export async function handleFetch({ event, request, fetch }) {
	const url = new URL(request.url);
	if (url.pathname === '/a') {
		return await fetch('/b');
	}

	return await fetch(request);
}

後に、universal load 関数を学習するとき、event.fetch はブラウザでも呼び出せることを学びます。ブラウザからリクエストするときは https://api.yourapp.com のようなパブリックな URL で、それをサーバー上で実行するときは内部 URL にリダイレクトしたいとき (API サーバーとパブリックなインターネットの間にあるロードバランサーやプロキシーをバイパスしたいとき)、handleFetch はとても有用です。

Edit this page on GitHub

1
2
3
4
5
<script>
	let { data } = $props();
</script>
 
<h1>{data.message}</h1>