Skip to main content
Basic Svelte
Introduction
Reactivity
Props
Logic
Events
Bindings
Classes and styles
Actions
Transitions
Advanced Svelte
Advanced reactivity
Reusing content
Motion
Advanced bindings
Advanced transitions
Context API
Special elements
<script module>
Next steps
Basic SvelteKit
Introduction
Routing
Loading data
Headers and cookies
Shared modules
Forms
API routes
$app/state
Errors and redirects
Advanced SvelteKit
Hooks
Page options
Link options
Advanced routing
Advanced loading
Environment variables
Conclusion
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
1