invalidate an URL in +layout.ts then invalidate an URL in +page.ts makes both layout and page load function run

[soonmyeongyoon]

Describe the bug

There are two load functions (one in +layout.ts and +page.ts) with following conditions:

• using provided fetch in load function
• +layout.ts calls hypothetical endpoint GET /api/random-number
• +page.ts calls hypothetical endpoint GET /api/todos
• +page.ts calls await parent() to fetch LayoutData from +layout.ts.

The expected invalidation behaviour is:

1. when invalidate('/api/random-numbers'), both load in +layout.ts and +page.ts re-run because await parent() exists in +page.ts
2. when invalidate('/api/todos'), only load in +page.ts runs because layout doesn't need any refresh - not as expected

invalidate('/api/todos') follows the expected behaviour when there was no previous invalidate('/api/random-numbers') call, but it also re-runs the load in +layout.ts if invalidate('/api/random-numbers') was previously called.

This isn't expected as the invalidation behaviour is different depending on the previous invalidation context. I was expecting that the invalidate call on +layout.ts will stay valid in subsequent page invalidation call once the layout load hydrate backs into the component, but that seems to be not the case.

I've tried to understand what is going on and it seemingly relates to invalidated that tracks all invalidation requests in client context (created by create_client in client.js). It looks like invalidate() only appends the URL/function to the invalidated array, but there is no concept of invalidation being done and removing them from this invalidated tracker.

Reproduction

https://stackblitz.com/edit/sveltejs-kit-template-default-2p2hwu?file=src%2Froutes%2F%2Bpage.svelte

Open DevTools. The reproduction does the following after it mounts and log the trace to console:

• OK: when the +page.svelte first loads, calls load in both +layout.ts and +page.ts
• OK: after 2 seconds, in +page.svelte, call invalidate('/api/todos') - this calls load in +page.ts
• OK: after 4 seconds, in +page.svelte, call invalidate('/api/random-number') - this calls load in both +layout.ts and +page.ts
• Unexpected: after 4 seconds, in +page.svelte, call invalidate('/api/todos') - this unexpectedly calls load in both +layout.ts and +page.ts

Logs

---load in +layout.ts called---
GET /random-number
---load in +page.ts called---
GET /todos
---INITIAL LOAD COMPLETE---

---load in +page.ts called---
GET /todos
---FIRST INVALIDATION COMPLETE: PAGE---

---load in +layout.ts called---
GET /random-number
---load in +page.ts called---
GET /todos
---SECOND INVALIDATION COMPLETE: LAYOUT---

---load in +layout.ts called---
GET /random-number
---load in +page.ts called---
GET /todos
---THIRD INVALIDATION COMPLETE: PAGE---

System Info

System:
    OS: Linux 5.15 Ubuntu 20.04.3 LTS (Focal Fossa)
    CPU: (2) x64 11th Gen Intel(R) Core(TM) i5-1135G7 @ 2.40GHz
    Memory: 897.35 MB / 2.35 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 18.13.0 - ~/.nvm/versions/node/v18.13.0/bin/node
    npm: 8.19.3 - ~/.nvm/versions/node/v18.13.0/bin/npm
  npmPackages:
    @sveltejs/adapter-auto: ^1.0.0 => 1.0.2 
    @sveltejs/kit: ^1.20.4 => 1.20.4 
    svelte: ^3.59.2 => 3.59.2 
    vite: ^4.0.0 => 4.0.4

Severity

serious, but I can work around it

Additional Information

No response

[themajashurka]

Maybe related to this? #10123

[dummdidumm]

Fixed by #11268