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...
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
invalidateorinvalidateAllis not working becauseconsole.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()}"}`);