Dealing with the new data prop: accessing layout data in page, and accessing stores in data

[kevinrenskers]

I'm trying to migrate to 414, and one of the things I am bumping into is the new single data prop. Two questions about this.

First question. If the +layout.js load function returns an object with data, I can easily consume this data in +layout.svelte, by using export let data. But if I want to use that same data within +page.svelte as well, I have to create a +page.js file with this oneliner.

export async function load({ parent }) {
  return await parent();
}

Why is this necessary, why can't the page access the data as returned by the layout directly?

Second question. If the data as returned by the layout contains a store, how can I easily work with this? For example, I used to have this code in my route file:

export let fetchedUser;
$: user = $fetchedUser;

And then within the Svelte file I could use user everywhere, which is a proper user object (keep in mind fetchedUser itself is a store). But now with the single data prop, I can't access data.$fetchedUser, that doesn't work. So I have to do something like this:

export let data;
$: fetchedUser = data.fetchedUser;
$: user = $fetchedUser;

This takes an extra line for every single property that I use, and there are quite a few of them. Is there an easier way to subscribe to the store? Something like $: user = data.$fetchedUser, but then working of course :)

Or in other words, this used to work:

<script>
  export let fetchedUser;
</script>

<Avatar user={$fetchedUser} />

But now I have to create this intermediate property because data.$fetchedUser isn't supported:

<script>
  export let data;
  $: fetchedUser = data.fetchedUser;
</script>

<Avatar user={$fetchedUser} />

[oxisto]

I'm trying to migrate to 414, and one of the things I am bumping into is the new single data prop. Two questions about this.

First question. If the +layout.js load function returns an object with data, I can easily consume this data in +layout.svelte, by using export let data. But if I want to use that same data within +page.svelte as well, I have to create a +page.js file with this oneliner.

export async function load({ parent }) {
  return await parent();
}

I had a similar issue at first, but when moving to 427 it seemed to magically work without any additional snippet in the +page.js file.

With regards to the stores, that is something that I am also trying to figure out :)

[kevinrenskers]

Ah, great! I guess it’s this PR: #6050. But I don’t want to upgrade past the “no more session” version yet. One migration at a time 😅