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