svelte invalidate not working with custom identifier

In svelte/SvelteKit I have a load that is not a fetch. The goal is to reload this "non-fetch" load with a button in UI.

According to Svelte documentation for depends, I should be able to use invalidate with a custom identifier, and "register" the custom identifier in the load?

Something like this:

export const load: PageLoad = function( { depends }){ depends( 'my:customurl' );
...

The custom identifier needs to be formated properly, and beforecolon:aftercolon should be legal format.

I am unable to get any reaction in the load when calling invalidate or invalidateAll from +page.svelte. Reproducable code (with hardcoded dummy data return) goes like this:

+page.ts:

import type { PageLoad } from './$types'; export const load: PageLoad = function( { depends }){ depends( 'my:customurl' ); console.log("load is triggered...") const someJson = JSON.parse(`{"someData":"${new Date().toISOString()}"}`); return { theData : someJson }
} 

+page.svelte:

<script lang="ts"> import type { PageData } from "./$types"; import { invalidate } from '$app/navigation'; import { invalidateAll } from '$app/navigation'; export let data: PageData; $: ({theData} = data) function reload(){ invalidate('my:customurl'); }; function reloadAll(){ invalidateAll(); };
</script>
<div> <section> <h3>Actions</h3> <button on:click={reload}>Reload</button> <button on:click={reloadAll}>Reload All</button> </section> <section> <h3>Data</h3> <div>{theData.someData}</div> </section>
</div>

I have also done the same with a +page.server.ts, but the result is the same.

I am using the same custom identifier my:customurl both in +page.svelte and +page.ts (or alt +page.server.ts).

I can tell the invalidate or invalidateAll is not working because the date is not changing when the buttons are clicked (The date is changing on browser page reload).

What do I need to do to get invalidate working for a non-fetch load?

1 Answer

I can tell the invalidate or invalidateAll is not working because console.log("load is triggered...") is not written when clicking either button.

You might be looking in the wrong place: After initial load, the code will run on the client, i.e. there will be no output on the server.

This works just fine for me.

Try actually changing the data:

const someJson = JSON.parse(`{"someData":"${new Date().toISOString()}"}`);