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
layout data のイントロダクションで見たように、+page.svelte
コンポーネントと +layout.svelte
コンポーネント は、親の load
関数から返された全てにアクセスすることができます。
時には、load
関数の中で親のデータにアクセスできると便利なことがあります。await parent()
でこれを実現することができます。
どのように動作するかを示すため、異なる load
関数で取得した2つの数値を足してみましょう。まず、src/routes/+layout.server.js
からデータを返します。
src/routes/+layout.server
export function load() {
return { a: 1 };
}
次に、src/routes/sum/+layout.js
でそのデータを取得します。
src/routes/sum/+layout
export async function load({ parent }) {
const { a } = await parent();
return { b: a + 1 };
}
universal
load
関数は親の serverload
関数からデータを取得することができます。その逆は真ではありません。server load 関数は、別の server load 関数からのみ親のデータを取得することができます。
最後に、src/routes/sum/+page.js
で、両方の load
関数から返される親のデータを取得しましょう。
src/routes/sum/+page
export async function load({ parent }) {
const { a, b } = await parent();
return { c: a + b };
}
await parent()
を使用する際はウォーターフォールを発生させないよう注意してください。親のデータに依存しない他のデータを取得(fetch
)できるのであれば、そちらを先に行ってください。
previous next
1
2
3
<p>if a = 1 and b = a + 1, what is a + b?</p>
<a href="/sum">show answer</a>