mcpField
S
sveltekit-data-flow

sveltekit-data-flow

github.com/spences10開発94496 回インストール2 週間前に更新
リポジトリ

sveltekit-data-flow について

SvelteKit 開発者向けに、ロード関数、フォームアクション、エラー処理の選び方を説明するデータフローのリファレンススキルです。シリアライズ規則と、クライアント側の認証後にデータを無効化する方法も扱います。

主な機能

  1. 01サーバーとユニバーサルのロード関数の区別
  2. 02フォームアクションによる送信処理
  3. 03fail、redirect、error による結果処理
  4. 04データのシリアライズ制限の説明
  5. 05クライアント側認証後のデータ更新

活用シーン

  1. 01ページデータを読み込むファイルの選択
  2. 02エラー処理を伴うフォーム送信の実装
  3. 03シリアライズ不能なサーバーデータの回避
  4. 04認証状態の変更後にページデータを無効化

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/spences10/svelte-skills-kit --skill sveltekit-data-flow

インストール後、Claude Code で/sveltekit-data-flowを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

README.md
references/
client-auth-invalidation.md
error-redirect-handling.md
form-actions.md
load-functions.md
serialization.md

詳細

SvelteKit のデータフロー

クイックスタート

どのファイル？ サーバー専用（DB／シークレット）：+page.server.ts | ユニバーサル（両方で実行）：+page.ts | API：+server.ts

ロードの判断基準： サーバーリソースが必要ですか？ → サーバーロード | クライアント API が必要ですか？ → ユニバーサルロード

フォームアクション： 常に +page.server.ts を使います。エラーには fail() を返し、画面遷移には redirect() を throw し、失敗時には error() を throw します。

例

// +page.server.ts
import { fail, redirect } from '@sveltejs/kit';

export const load = async ({ locals }) => {
	const user = await db.users.get(locals.userId);
	return { user }; // Must be JSON-serializable
};

export const actions = {
	default: async ({ request }) => {
		const data = await request.formData();
		const email = data.get('email');

		if (!email) return fail(400, { email, missing: true });

		await updateEmail(email);
		throw redirect(303, '/success');
	},
};

参考ファイル

注意事項

  • サーバーロード → data パラメーターを介してユニバーサルロードへ | 必ず throw redirect()/error() を使います
  • サーバーロードからクラスインスタンス／関数を返さないでください（シリアライズできません）
  • 最終確認日： 2025-01-11

コメント

Markdown 対応