riverpod-cancel について
Provider 内のリクエストライフサイクルを管理する Riverpod 開発者向けスキルです。破棄時に実行中のリクエストをキャンセルする方法と、連続する更新をデバウンスする方法を説明します。
主な機能
- 01Provider 破棄時のリクエストキャンセル
- 02連続更新のデバウンス
- 03破棄時の HTTP クライアント終了
- 04再利用可能な Ref 拡張パターン
活用シーン
- 01ページを離れる際のリクエスト停止
- 02連続更新による重複リクエストの回避
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/インストール後、Claude Code で/riverpod-cancelを入力して読み込まれたか確認します。
詳細
Riverpod — リクエストのキャンセルとデバウンス
手順
ユーザーがページを離れたときに進行中のリクエストをキャンセルしたり、連続した更新をデバウンスしたりするには、ref.onDispose を auto-dispose（または ref.watch）と組み合わせて使用します。
ページを離れたときにキャンセルする
プロバイダーが auto-dispose になっていることを確認します。ユーザーが別のページに移動すると、プロバイダーのリスナーがなくなり、破棄されます。その際、ref.onDispose が実行されます。このコールバックでリクエストをキャンセルします（例：リクエストに使用した HTTP クライアントを閉じます）。
パターンの例：プロバイダー内で http.Client() を作成し、フェッチ処理に渡して、ref.onDispose(client.close) を呼び出します。プロバイダーが破棄されると、クライアントが閉じられ、リクエストがキャンセルされます。具体的な API は使用する HTTP パッケージによって異なります。
更新のデバウンス
ユーザーが短時間に何度も更新を実行した場合、操作が止まるまで実際のリクエストを遅らせることができます（例：500ms）。パターンは次のとおりです。
- プロバイダー内でフラグ（例：
didDispose = false）を設定し、ref.onDispose(() => didDispose = true) を呼び出します。 - await Future.delayed(duration) を実行します。
- didDispose が true の場合、遅延中にユーザーが別の更新を実行しています。中止するために throw します（Riverpod が例外を捕捉して無視します）。そうでなければ、クライアントを作成し、onDispose(client.close) を登録してからリクエストを実行します。
つまり、まず遅延させてからクライアントを作成し、リクエストを実行します。遅延中に破棄された場合は中止され、クライアント作成後に破棄された場合はリクエストがキャンセルされます。
再利用可能な拡張
Ref の拡張を実装して、デバウンスとキャンセルに対応したクライアントを返すことができます。
- onDispose を使って「キャンセル済み」フラグを設定します。
- デバウンス時間が経過するまで待機し、破棄されていたら例外をスローします。
- クライアントを作成し、onDispose(client.close) を登録してから、クライアントを返します。
この拡張をアクティビティ／プロバイダーで使用すると、すべての呼び出し箇所でデバウンスとキャンセルが適用されます。拡張の完全な例については、Riverpod の公式「cancel」ハウツーを参照してください。