メインコンテンツへスキップ
高度なSvelteKit 高度なローディング カスタム依存関係

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

[a-z]+:パターンで始まる任意の文字列が有効なURLであるため、data:nowのようなカスタム無効化キーを作成できます。

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>

GitHubでこのページを編集

前へ 次へ
無効化
1