Calling fetch(url) inside a load function registers url as a dependency. Sometimes it’s not appropriate to use fetch, in which case you can specify a dependency manually with the depends(url) function.
Since any string that begins with an [a-z]+: pattern is a valid URL, we can create custom invalidation keys like data:now.
Update src/routes/+layout.js to return a value directly rather than making a fetch call, and add the depends:
src/routes/+layout
export async function load({ depends }) {
depends('data:now');
return {
now: Date.now()
};
}Now, update the invalidate call in src/routes/[...timezone]/+page.svelte:
src/routes/[...timezone]/+page
<script>
import { onMount } from 'svelte';
import { invalidate } from '$app/navigation';
let { data } = $props();
onMount(() => {
const interval = setInterval(() => {
invalidate('data:now');
}, 1000);
return () => {
clearInterval(interval);
};
});
</script>previous next
1