Advanced loading / invalidateAll • Svelte Tutorial

Advanced SvelteKit Advanced loading invalidateAll

Finally, there’s the nuclear option — invalidateAll(). This will indiscriminately re-run all load functions for the current page, regardless of what they depend on.

Update src/routes/[...timezone]/+page.svelte from the previous exercise:

src/routes/[...timezone]/+page

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

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

The depends call in src/routes/+layout.js is no longer necessary:

src/routes/+layout

export async function load({ depends }) { depends('data:now');  return { now: Date.now() }; }

invalidate(() => true) and invalidateAll are not the same. invalidateAll also re-runs load functions without any url dependencies, which invalidate(() => true) does not.

Edit this page on GitHub

previous next

Custom dependencies $env/static/private

show text show editor