Advanced loading / Custom dependencies • Svelte Tutorial

Advanced SvelteKit Advanced loading Custom dependencies

load 関数の中で fetch(url) を呼ぶと、url を依存関係(dependency)として登録します。fetch を使用するのが適切でない場合もありますが、その場合は depends(url) 関数を使って手動で依存関係を指定することができます。

[a-z]+: パターンで始まる文字列であれば有効な URL であるため、data:now のようなカスタムの invalidation key を作ることができます。

src/routes/+layout.js を更新します。fetch を呼び出すのではなく値を直接返すようにし、そして depends を追加します。

src/routes/+layout

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

	return {
		now: Date.now()
	};
}

そして、src/routes/[...timezone]/+page.svelte にある invalidate 呼び出しも更新します。

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