Basic Svelte
Bindings
Classes and styles
Advanced Svelte
Advanced reactivity
Motion
Advanced bindings
Advanced transitions
Context API
Special elements
<script module>
Next steps
Basic SvelteKit
Introduction
Routing
Loading data
Headers and cookies
Shared modules
API routes
$app/state
Errors and redirects
Advanced SvelteKit
Page options
Link options
Advanced routing
Advanced loading
Environment variables
Conclusion
handle に渡される event オブジェクトは、+server.js ファイルの API routes や +page.server.js ファイルの form actions や +page.server.js と +layout.server.js の load 関数に渡されるものと同じオブジェクトで、RequestEvent のインスタンスです。
便利なプロパティやメソッドを数多く持っており、いくつかはすでに見たことがあるでしょう:
cookies— cookies APIfetch— 標準の Fetch API と同等ですが、いくつかの機能が追加されていますgetClientAddress()— クライアントの IP アドレスを取得する関数isDataRequest— クライアントサイドナビゲーション中にブラウザがデータをリクエストしているとtrue、ページやルート(route)が直接リクエストされているとfalselocals— 任意のデータを置く場所params— ルート(route)のパラメータrequest— Request オブジェクトroute— マッチしたルート(route)を表すidプロパティを持つオブジェクトsetHeaders(...)— レスポンスに HTTP ヘッダーを設定する関数url— 現在のリクエストを表す URL オブジェクト
便利なパターンとしては、handle で event.locals にデータを追加して、後続の load 関数でそれを使用できるようにすることです:
src/hooks.server
export async function handle({ event, resolve }) {
event.locals.answer = 42;
return await resolve(event);
}src/routes/+page.server
export function load(event) {
return {
message: `the answer is ${event.locals.answer}`
};
}previous next
1
2
3
4
5
<script>
let { data } = $props();</script>
<h1>{data.message}</h1>