How to update session in a page load function?

[ponderingexistence]

Describe the bug

This is probably more of a question.
I have a /purchase page which users get redirected to after a payment transaction is complete. Inside the load function of that page, I'm sending a request to my API to verify the purchase, and I then need to subsequently update the session (which includes information about the purchased items). Before session was removed this is what my page's load function looked like:

routes/purchase/+page.ts:

export const load: Load = async ({ session, fetch }) {
  await fetch('...verify-purchase');
  session = await getSessionInfo(); // This updates `session`
};

Now that there's no session anymore, I have had to move what previously resided in the getSession hook over to my root layout's load function. But I don't know how I'm supposed to update it in my purchase page's load function, I'm doing the following:

routes/purchase/+page.ts:

export const load: PageLoad = async ({ fetch }) {
  await fetch('...verify-purchase');
  return {
    session: await getSessionInfo()
  };
};

This appeared to work at first, but then I found out that as soon as the user navigates away from the purchase page (e.g. clicks on the home page link to go to the home page), the session info reverts back to its previous state, and the updated information that the purchase page returned is basically ignored. This wasn't the case with the built-in session in the past.

How do I solve this problem?

[dummdidumm]

Use depends and invalidate for this. Use depends to tell the load function that it depends on something specific. Then use invalidate to mark the resource as needing a reload, which reruns your load:

// +layout.ts
export const load: Load = async ({ session, fetch, depends }) {
  await fetch('...verify-purchase');
  depends('some-unique-string');
  return await getSessionInfo();
};

// +page.ts
import { invalidate } from '$app/navigation';
import { browser } from '$app/env';

export const load: PageLoad = async ({ fetch }) {
  await fetch('...verify-purchase');
  if (browser) { // you don't need the surrounding if-clause if this page is not SSRd (SPA mode)
    invalidate('some-unique-string');
  }
};

It might also make sense to put the invalidate call somewhere else where it makes more sense (I guess this is related to an action).

[ponderingexistence]

@dummdidumm It doesn't seem to work actually, the session isn't updated. This is what I'm doing:

+layout.ts:

export const load: LayoutLoad = async ({ depends }) => {
  depends('session');
  return {
    session: await getSessionInfo()
  };
};

+page.ts:

export const load: PageLoad = async ({ fetch }) => {
  await fetch('...verify-purchase');
  if (browser) {
    invalidate('session');
  }
  return { ... };
};

Am I doing anything wrong? Thanks.

[ponderingexistence]

@dummdidumm Shouldn't this be turned back into an issue? Because it seems like there's a bug here.

[dummdidumm]

I don't know your surrounding code, but I did try this and it worked

[ponderingexistence]

Did you actually try it with a fetch? Because it does make the load functions re-run for me too, it just doesn't send the fetch request again and just uses the old response.