Advanced loading / Custom dependencies • Svelte Tutorial

Advanced SvelteKit Advanced loading Custom dependencies

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>

<script lang="ts"> import { onMount } from 'svelte'; import { invalidate } from '$app/navigation';  let { data } = $props();  onMount(() => { const interval = setInterval(() => { invalidate('data:now'); }, 1000);  return () => { clearInterval(interval); }; }); </script>

Edit this page on GitHub

previous next

Invalidation invalidateAll

show text show editor