svelte invalidate not working with custom identifier

Question

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?

Answer 1

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()}"}`);