invalidateAll doesn't reload data from +layout.server.ts

[DePasqualeOrg]

I'm loading some data on the server in +layout.server.ts, and when I call invalidateAll, it doesn't refresh the data from +layout.server.ts. Is this intentional, and how can I force the data from +layout.server.ts to reload without reloading the page?

[caidanw]

I'm also having the same issue, and your post was the first I found online about this.

[caidanw]

Solution

I think I was able to figure it out, my component looked kinda like this:

<script>
  export let data;
  const {item} = data;
</script>

<button on:click={() => invalidateAll())>Reload</button>
<p>{item}</p>

From svelte docs:

Note that rerunning a load function will update the data prop inside the corresponding +layout.svelte or +page.svelte; it does not cause the component to be recreated. As a result, internal state is preserved.

The issue that I was facing is that when you destructure an object from data you don't get the reactivity that's needed to use invalidate. So what was happening is that data was being updated, but since the component is not being recreated the item variable was never being reassigned when data was updated. So to fix this there are two ways to do it.

Option 1

Don't destructure, but use a reactive assignment to a new variable. This will mean that when data is updated, item will be as well.

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

<button on:click={() => invalidateAll())>Reload</button>
<p>{item}</p>

When to use? Probably best for things like mapping over a property of data, eg.

$: items = data.items.map((item) => item.value))

Option 2

Don't reassign at all, and instead directly reference data.

<script>
  export let data;
</script>

<button on:click={() => invalidateAll())>Reload</button>
<p>{data.item}</p>

When to use? For small chunks of data this seems like a good option, but I can imagine if you have deeply nested or lots of data, you might want to consider option 1.

Edit

I realize there is some nuance between the two solutions. For the reactive assignment, you can't use the value immediately in the script tag (inside functions and in html markup is fine) but I'm not sure why, maybe someone else knows?

<script>
  export let data;
  $: item = data.item;
  console.log(item); // logs "undefined"
  console.log(data.item); // logs correct value
</script>

<button on:click={() => invalidateAll())>Reload</button>
<p>{item}</p>

[DePasqualeOrg]

For the reactive assignment, you can't use the value immediately in the script tag (inside functions and in html markup is fine)

That was exactly my problem. I had a const based on a property of data in my script, and it wasn't getting reassigned after calling invalidateAll. Assigning a variable inside a reactive statement solved the problem.

[caidanw]

Glad I could help, and hopefully anyone else searching for this issue will find this thread.

[xerosanyam]

this was very useful. thanks a lot!
for me the option 2 worked.

I didn't understand why the following methods didn't work though

Didn't work

Method 1

#key

<script lang="ts">
  import BasePage from '../../../components/BasePage.svelte';
  export let data;
  export let { id, text } = data;
</script>

{#key data}
  <BasePage {id} {text} />
{/key}

Method 2

• reactivity via $

<script lang="ts">
  import BasePage from '../../../components/BasePage.svelte';
  export let data;
  export let { text } = data;
  $: id = data.id;
</script>

<BasePage {id} {text} />

Method 3

<script lang="ts">
  import BasePage from '../../../components/BasePage.svelte';
  let { data } = $props();
  let { id, text } = data;
</script>

<BasePage {id} {text} />

What worked

Method 1

<script lang="ts">
  import BasePage from '../../../components/BasePage.svelte';
  export let data;
</script>

<BasePage {...data} />

Method 2

<script lang="ts">
  import BasePage from '../../../components/BasePage.svelte';
  let { data } = $props();
</script>

<BasePage {...data} />

[kingraphaii]

@xerosanyam your suggestions worked for me as well. If you try to deconstruct any props on data it wont work apparently.