Svelte入門：リファレンス $app/navigation -Vol.3-

よっしー

こんにちは。よっしーです(^^)

今日は、SvelteKitのリファレンスについて解説しています。

背景
$app/navigation
1. invalidate
  1. 解説
  2. 使用例
2. invalidateAll
  1. 解説
  2. 使用例
おわりに

背景

SvelteKitのリファレンスについて調査する機会がありましたので、その時の内容を備忘として記事に残しました。

$app/navigation

import {
	afterNavigate,
	beforeNavigate,
	disableScrollHandling,
	goto,
	invalidate,
	invalidateAll,
	onNavigate,
	preloadCode,
	preloadData,
	pushState,
	replaceState
} from '$app/navigation';

$app/navigation モジュールは SvelteKit アプリケーションでクライアントサイドのナビゲーションを制御するための関数を提供します。主な機能は以下の通りです：

afterNavigate – ナビゲーション完了後に実行されるコールバック関数を設定します。ページ遷移後の処理に使用します。
beforeNavigate – ナビゲーション開始前に実行されるコールバック関数を設定します。ページ遷移前の処理に使用します。
disableScrollHandling – SvelteKit のデフォルトのスクロール処理を無効化します。カスタムのスクロール動作を実装したい場合に使用します。
goto – プログラムによるナビゲーションを実行します。指定されたURLに移動します。
invalidate – 特定のデータの依存関係を無効化し、ページのデータを再読み込みします。
invalidateAll – すべてのデータの依存関係を無効化し、ページ全体のデータを再読み込みします。
onNavigate – ナビゲーション中に実行されるコールバック関数を設定します。
preloadCode – 指定されたページのコードを事前に読み込みます。パフォーマンス向上のために使用します。
preloadData – 指定されたページのデータを事前に読み込みます。パフォーマンス向上のために使用します。
pushState – ブラウザの履歴に新しいエントリを追加します。新しいURLにナビゲーションする際に使用します。
replaceState – 現在のブラウザ履歴エントリを置き換えます。現在のURLを別のURLに置き換える際に使用します。

これらの関数を使用することで、SvelteKit アプリケーション内でのナビゲーション体験をカスタマイズし、よりスムーズで効率的なユーザー体験を提供することができます。

invalidate

fetch や depends を介して問題の url に依存している場合、現在アクティブなページに属する任意の load 関数を再実行させます。ページがその後更新されると解決する Promise を返します。引数が string または URL として与えられる場合、それは fetch や depends に渡されたのと同じ URL（クエリパラメータを含む）に解決される必要があります。カスタム識別子を作成するには、[a-z]+: で始まる文字列（例：custom:state）を使用します — これは有効な URL です。 function 引数を使用してカスタム述語を定義できます。これは完全な URL を受け取り、true が返された場合に load を再実行させます。これは、完全一致ではなくパターンに基づいて無効化したい場合に便利です。

// 例: クエリパラメータに関係なく '/path' にマッチさせる
import { invalidate } from '$app/navigation';

invalidate((url) => url.pathname === '/path');

function invalidate(
	resource: string | URL | ((url: URL) => boolean)
): Promise<void>;

解説

invalidate は SvelteKit のナビゲーション機能で、以下のような特徴があります：

データの再取得 – 特定のリソースに依存するページの load 関数を再実行させます。
引数のタイプ:
- string: URL 文字列
- URL: URL オブジェクト
- function: URL を引数に取り、真偽値を返す関数
依存関係の仕組み – ページの load 関数内で fetch や depends を使用してリソースに依存関係を設定している場合のみ、その依存関係が一致する場合に再実行されます。
カスタム識別子 – custom:mydata のような形式でカスタム識別子を作成できます。これは実際の URL ではなく、データの依存関係を表す識別子として機能します。
関数による条件付き無効化 – 関数を使用して、特定のパスやパターンに基づいた条件付き無効化も可能です。

使用例

<script>
  import { invalidate } from '$app/navigation';
  
  // 特定のAPIエンドポイントに依存するデータを再取得
  async function refreshUserData() {
    await invalidate('/api/user');
    console.log('ユーザーデータが更新されました');
  }
  
  // カスタム識別子を使用したデータの無効化
  async function resetAppState() {
    await invalidate('custom:appState');
    console.log('アプリの状態がリセットされました');
  }
  
  // パターンマッチングによる無効化
  async function refreshAllProductData() {
    await invalidate((url) => url.pathname.startsWith('/api/products'));
    console.log('すべての商品データが更新されました');
  }
</script>

<!-- load 関数の例 (別のファイルで定義) -->
<!--
export async function load({ fetch, depends }) {
  // このURLに対する依存関係を設定
  depends('/api/user');
  
  // カスタム識別子に対する依存関係を設定
  depends('custom:appState');
  
  // データ取得
  const userData = await fetch('/api/user').then(r => r.json());
  const productData = await fetch('/api/products/featured').then(r => r.json());
  
  return {
    user: userData,
    products: productData
  };
}
-->

<button on:click={refreshUserData}>ユーザーデータを更新</button>
<button on:click={resetAppState}>アプリ状態をリセット</button>
<button on:click={refreshAllProductData}>全商品データを更新</button>

この関数は、ユーザーアクションに応じてデータを再取得したい場合や、特定のデータが変更された際にページを更新したい場合など、アプリケーションの状態管理に非常に役立ちます。load 関数で定義された依存関係に基づいて選択的にデータを再取得できるため、効率的なデータ更新が可能になります。

invalidateAll

現在アクティブなページに属するすべての load 関数を再実行させます。ページがその後更新されると解決する Promise を返します。

function invalidateAll(): Promise<void>;

解説

invalidateAll は SvelteKit のナビゲーション機能で、以下のような特徴があります：

すべてのデータの再取得 – 現在のページに関連するすべての load 関数を無条件で再実行します。
引数なし – 特定のリソースを指定する必要がなく、すべてのデータを一括で無効化します。
Promise の返却 – ページ更新が完了したときに解決する Promise を返します。
invalidate との違い – invalidate が特定のリソースに依存するデータのみを再取得するのに対し、invalidateAll はすべてのデータを再取得します。

使用例

<script>
  import { invalidateAll } from '$app/navigation';
  
  // ページ内のすべてのデータを更新する関数
  async function refreshAllData() {
    try {
      await invalidateAll();
      console.log('すべてのデータが更新されました');
    } catch (error) {
      console.error('データの更新に失敗しました', error);
    }
  }
  
  // 設定変更後などにすべてのデータを更新
  async function saveSettings() {
    // 設定を保存
    await saveUserSettings();
    
    // 設定変更の影響を受ける可能性のあるすべてのデータを更新
    await invalidateAll();
  }
</script>

<!-- load 関数の例 (別のファイルで定義) -->
<!--
export async function load({ fetch, depends }) {
  // 複数のデータソースからデータを取得
  const userData = await fetch('/api/user').then(r => r.json());
  const notificationsData = await fetch('/api/notifications').then(r => r.json());
  const settingsData = await fetch('/api/settings').then(r => r.json());
  
  return {
    user: userData,
    notifications: notificationsData,
    settings: settingsData
  };
}
-->

<button on:click={refreshAllData}>すべてのデータを更新</button>
<button on:click={saveSettings}>設定を保存</button>

この関数は、以下のようなシナリオで特に役立ちます：