Skip to main content
Basic Svelte
Introduction
Reactivity
Props
Logic
Events
Bindings
Classes and styles
Actions
Transitions
Advanced Svelte
Advanced reactivity
Reusing content
Motion
Advanced bindings
Advanced transitions
Context API
Special elements
<script module>
Next steps
Basic SvelteKit
Introduction
Routing
Loading data
Headers and cookies
Shared modules
Forms
API routes
$app/state
Errors and redirects
Advanced SvelteKit
Hooks
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 関数は親の server load 関数からデータを取得することができます。その逆は真ではありません。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)できるのであれば、そちらを先に行ってください。

Edit this page on GitHub

1
2
3
<p>if a = 1 and b = a + 1, what is a + b?</p>
<a href="/sum">show answer</a>