I'm still not understanding how to properly use invalidate()

[j4w8n]

I'm getting unexpected behavior - probably because I don't know how this works.

Here's my route structure:

routes
 ┣ api
 ┃ ┗ cookie
 ┃ ┃ ┗ +server.js
 ┣ app
 ┃ ┣ +page.server.js
 ┃ ┗ +page.svelte
 ┣ login
 ┃ ┗ +page.svelte
 ┣ +layout.server.js
 ┣ +layout.svelte
 ┗ +page.svelte

• If you browse to /login, there's a login button for github oauth.
• Upon clicking the button, oauth does it's thing and code within +layout.svelte knows someone's now logged in.

That's when this code runs:

/* +layout.svelte */

fetch('/api/cookie', {
  method: 'POST',
  body: cookie_data
})
.then(async (res) => {
  if (res.status === 200) {
    await invalidate('/')
    goto('/app')
  }
})

The hook.js handle() is reading the cookie and passing data to event.locals.
In +layout.server.js, I'm returning a session object from event.locals, to read as data.session in +layout.svelte.

export let data
$: session = data.session

I'm logging various points in the flow, and now get this output of what's happening when the code above is run. I suspect the first three lines are because of what supabase is doing to execute the login and callback.
What I'm not understanding is why app/+page.server.js is logging before +layout.server.js - implying it's running before +layout.server.js.

handle called for  /login
+layout.server.js load running
+layout.svelte data { session: null }
handle called for  /api/cookie
handle called for  /app
app/+page.server.js load running
+layout.server.js load running

What's interesting is that when I click the logout button, I run await invalidate() and then goto('/'), but the logs on this always show +layout.server.js first.

handle called for  /api/cookie
handle called for  /app
+layout.server.js load running
app/+page.server.js load running
handle called for  /

Also, when the login process and code finishes, two parts of the app should now reflect that a user is logged in:

1. /app/+page.svelte will now show user data
2. /+layout.svelte will now show a logout button in the navbar.

However, with the code above, only the /app page will render user data.

If I change await invalidate('/') to await invalidate(), then both will happen.

What am I not understanding? Thanks!

Update

Actually, if I read the docs really slow - like two times, I might know what's going on with invalidate().

I'm now thinking that '/' would only re-run load in /+page.server.js, and doesn't touch load in +layout.server.js. But once I remove the '/' from invalidate('/') the remaining invalidate() also runs the load function in +layout.server.js, hence updating data in +layout.svelte and properly showing the logout button because data.session is populated.

[lukaszpolowczyk]

Related - #6051