How to get Sveltekit to refresh the data when going from one [slug] to another?

[hubert-ix]

It's probably a common question but I couldn't find the answer.

I have a /routes/[slug] folder, and a pretty simple case:

+page.js

export async function load({ fetch, params, url }) {
  let item = await fetchItemFromDb();
  return {item }
}

+page.svelte

<script>
export let data;

let item = data.item;
</script>

{data.item.title}

Then I have a navigation bar with links to /test1 and /test2.

I go to /test1, and I get the data for that URL. Then I click on /test2, but sveltekit doesn't refresh anything.

+page.js is actually called again and the new data is passed on to +page.svelte (I don't even have to use invalidate()), but the new data is not rendered on the page.

So if I update +page.svelte to this:

<script>
export let data;

let item = data.item;

$: if (data) {
  console.log(data.item.title)
}
</script>

{item.title}

When I click on /test2, I get the new title in the console, but not rendered on the page.

How can I get it to render the new data?

[hubert-ix]

Ah, duh... I simply have to declare item with a reactive statement, otherwise sveltekit doesn't know it has changed...

+page.svelte

<script>
export let data;

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

{item.title}

[eallenOP]

This helped me with the same problem. So simple! Thank you :)

[dangelomedinag]

when you use the params argument to the load function, Sveltekit automatically 'detects' that the parameter has changed, and updates the value of data (most commonly the params.slug is used to get dynamic data). In your case, since you don't use params.slug inside the load function, you have to make a reactive statement for the changes to be rendered.

[hubert-ix]

Oh, very interesting, I didn't know that. Thanks for the tip!

[eallenOP]

I'm using the params value in my load function but I still got the OP issue. The reactive statement in +page.svelte fixed it for me.

src/routes/location/[location]/+page.server.js

export async function load( {params} ) {
  
  const url = 'https://api.spacetraders.io/v2/systems/X1-DF55/waypoints/' + params.location;

  const response = await fetch(url, options); 
  const location_details = await response.json(); 

  if (location_details) {
    return {
      location_details,
    };
  }
  return {
    status: 404,
  };
}

[sandrovilar]

I'm was using goto to the same route (with different params) and getting the length of multiple arrays (in data) was always the same (previous request) to perform some layout adjustments, using a reactive statement solved the problem, thanks!

[dangelomedinag]

@eallenOP I did a minimal repro and it always works, I don't really know what you might be doing differently, whenever params.slug changes it re-runs the load function and updates the data value in +page.svelte without needing to declare a reactive variable.

PS: Whenever possible, use fetch from load( {fetch, params} ) instead of regular fetch

[eallenOP]

I worked it out. In your repro you render the page straight from data here

<script>
   export let data
</script>
<h1>
   {data.user.username}
</h1>
<p>{data.user.phone}</p>

but in the OP and in my own code we've grabbed the data out of data to make life easier in the rest of the +page.svelte file, like this:

<script>
   export let data
   let user = data.user;
</script>
<h1>
   {user.username}
</h1>
<p>{user.phone}</p>

but because user isn't reactive it wasn't updating with the new user even when data changed, hence looking as though the page doesn't rerender. So I'm not sure whether it would be affected at all by not using params.slug in the load function after all.

Hence the solution accepted above is still the solution:

<script>
   export let data
   $: user = data.user;
</script>
<h1>
   {user.username}
</h1>
<p>{user.phone}</p>

[ticup]

Thanks for the explanation @eallenOP , I have been struggling with this for a while, sometimes it was changing, sometimes it wasn't. Now I know why. I feel like we should have better documentation on such subtle things.

[Anoopvempeny]

gft

[amirzezo201]

did anyone try to make it work in Runes mode

[fo-rk]

I don't know if it's wrong for other reasons, but I used:

let { data } = $props();
let user = $derived(data.user);