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>