kit
kit copied to clipboard
Outdated return value from invalidated load function on navigation
Describe the bug
I've been trying to get data from a nested +layout.server.ts
to invalidate using a custom identifier.
I have a file structure like this:
routes/
|- counter/
|- +layout.server.ts <-- `depends('increment:counter')`
|- [id]/
|- +page.server.ts <-- loads more data and lets sveltekit merge the returned value
|- +page.svelte <-- has a button that calls `invalidate('increment:counter')` and a link to change the `id` param
Since SvelteKit v2, calling invalidate
in the nested +page.svelte
will increase the counter, but a navigation to a different subroute of /counter/
will reset the counter to the value it had on initial load
This doesn't happen with invalidateAll
but it will increment the first time you navigate after calling it, this is unexpected to me.
Adding a call to parent
in the +page.server.ts
and manually merging it into the returned data will stop the counter resetting but it will now increment on every navigation.
Is there a reason why the +page.server.ts
is using the outdated value of counter
instead on using the value from the last invalidation?
Reproduction
SvelteKit v2: https://stackblitz.com/edit/sveltejs-kit-template-default-7psjuw?file=package.json
SvelteKit v1: https://stackblitz.com/edit/sveltejs-kit-template-default-3ju85k?file=package.json
Logs
No response
System Info
System:
OS: Linux 5.0 undefined
CPU: (2) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
Memory: 0 Bytes / 0 Bytes
Shell: 1.0 - /bin/jsh
Binaries:
Node: 18.18.0 - /usr/local/bin/node
Yarn: 1.22.19 - /usr/local/bin/yarn
npm: 9.4.2 - /usr/local/bin/npm
pnpm: 8.10.5 - /usr/local/bin/pnpm
npmPackages:
@sveltejs/adapter-auto: ^3.0.0 => 3.0.1
@sveltejs/kit: ^2.0.0 => 2.0.5
@sveltejs/vite-plugin-svelte: ^3.0.0 => 3.0.1
svelte: ^4.2.7 => 4.2.8
vite: ^5.0.3 => 5.0.10
Severity
serious, but I can work around it
Additional Information
This was introduced in SvelteKit v2, here is a v1 reproduction that doesn't have the issue: https://stackblitz.com/edit/sveltejs-kit-template-default-3ju85k?file=package.json
I'm also having a similar issue where I use a +layout.server.ts
for AuthJS, and a +layout.ts
for fetching some data.
The load function in +layout.ts
is run when invalidated but the data in +page.svelte
isn't changing, if I console log on both sides (reactively in +page.svelte
), it shows different values
We are experiencing this as well.
- Let's say we have a value of x = 1 stored in our database, and it is loaded in a value in a '/+layout.server.ts' with a depends('app:number').
- In "/RouteA/+page.svelte", we display the value (correctly), then we call an API that updates x to 2 in the database, then call the invalidate('app:number'), it displays the new value of 2 in the page (again, correctly).
- Then, we navigate to '/RouteB/+page.svelte' which also displays the value of x, but it will show the non-invalidated value of 1.
- Then, refresh the browser, and now '/RouteB/+page.svelte' shows the corrected value of x as 2.
Additional notes:
If the '/Route.../' DOES NOT have a +page.server.ts
- The problem DOES NOT exist, and it navigates as expected with the correct value
If the '/Route.../' DOES have a +page.server.ts
- If parent() IS NOT called, the problem DOES exist, and a navigation will show the incorrect value
- If parent() IS called, the problem DOES NOT EXISTS, and it navigates as expected with the correct value
Note that this behavior is different from SvelteKit 1, which would have always refreshed properly, with or without a parent() call.
If it helps, I created a small sample app that demonstrates the problem using a persisted value in the hooks file. See: https://github.com/denjpeters/SK2Test