Rerunning ‘load’ method on slug change

[zebede22]

I’m working with SvelteKit and have several pages under path/[id=uuid]/, such as path/[id=uuid]/first, path/[id=uuid]/second, etc. I need to fetch data when accessing anything under path/[id=uuid]/, and this data is shared between the pages.

My current solution is to use the ‘load’ method from path/[id=uuid]/+layout.ts and store the fetched data within a shared store. Now, any page I visit (first, second) runs the ‘load’ method and fetches the data which is used by accessing the shared store.

However, I’ve encountered a problem. When I access path/1/first (or second), it fetches data and renders it, but if I navigate to path/2/first (where I’ve changed the ID), the data from the first request is visible without loading. After several seconds, some of the data is replaced by the new one from id 2. I want to rerun the ‘load’ (fetch logic) any time the slug value changes. Keeping data if the slug (URL path) stays the same is very good, but if the slug is different, it’s better to rerun.

I suspect this is some kind of optimization by Svelte, but it’s not very intuitive how it works. What should I do to ensure the ‘load’ method reruns whenever the slug changes?

[zebede22]

I think rerun is done because slug changes, but before the new data arrives it renders old one.
One solution I found it to use "isLoading" key with each state but maybe there is a better solution

[pixelmund]

You should avoid using stores within your load function. Just use the page store provided by Kit. You can read more about that here

[zebede22]

I have two different data requested within the load, I keep looping (setInterval) until both are ready but same time as soon as I'm getting one of them I put it into the store so the app can use it until the other one is ready.

If I use $page.data I need to wait until both are ready and return the values.

Is it possible to do similar with $page.data?