フラッシュデータ

場合によっては、ブラウザの履歴を移動したときに再表示されてほしくない、一度きりのデータをフロントエンドに送信したいことがあります。通常の props と異なり、フラッシュデータは履歴の state に永続化されないため、成功メッセージ、新しく作成された ID、その他の一時的な値に最適です。

データをフラッシュする

Inertia::flash() メソッドを使用して、キーと値、またはキーと値の配列を渡すことでデータをフラッシュできます。

public function store(Request $request)
{
    $user = User::create($request->validated());

    Inertia::flash('message', 'ユーザーが正常に作成されました！');

    // または、複数の値を一度にフラッシュすることもできます...
    Inertia::flash([
        'message' => 'ユーザーが作成されました！',
        'newUserId' => $user->id,
    ]);

    return back();
}

back() とのチェーンもサポートされています。

return Inertia::flash('newUserId', $user->id)->back();

render() に flash() をチェーンすることも、その逆も可能です。

return Inertia::render('Projects/Index', [
    'projects' => $projects,
])->flash('highlight', $project->id);

// または...

return Inertia::flash('highlight', $project->id)
    ->render('Projects/Index', ['projects' => $projects]);

フラッシュデータは現在のリクエストにスコープされます。リダイレクト時には、ミドルウェアが自動的にセッションへ永続化します。フラッシュデータがクライアントに送信されるとクリアされ、以降のリクエストでは表示されません。

フラッシュデータへのアクセス

フラッシュデータは page.flash で利用できます。また、グローバルな flash イベントをリッスンするか、onFlash コールバックを使用することもできます。

onFlash コールバック

リクエストを行う際に、onFlash コールバックを使用してフラッシュデータを処理できます。

グローバルフラッシュイベント

レイアウトコンポーネントなど、中央集約的な場所でフラッシュデータを処理するために、グローバルな flash イベントを使用できます。イベントの詳細については、イベントのドキュメント を参照してください。

ネイティブのブラウザイベントもサポートされています。

flash イベントはキャンセルできません。部分的なリロード 中は、フラッシュデータが変更された場合にのみ発火します。

クライアントサイドのフラッシュ

router.flash() メソッドを使用すると、サーバーリクエストなしでクライアント側からフラッシュデータを設定できます。値は既存のフラッシュデータとマージされます。

現在のフラッシュデータにアクセスしたり、完全に置き換えたりするために、コールバックを渡すこともできます。

TypeScript

TypeScript の宣言マージ を使用して、フラッシュデータの型をグローバルに設定できます。

テスト

フラッシュデータのテストについては、テストのドキュメント を参照してください。