mcpField
R
riverpod-cancel

riverpod-cancel

github.com/serverpodDevelopment1081 installsUpdated 34w ago
Repository

About riverpod-cancel

A Riverpod skill for developers who need to manage request lifecycles in providers. It demonstrates cancelling in-flight requests on disposal and delaying requests to debounce rapid refreshes.

Key features

  1. 01Cancel requests on provider disposal
  2. 02Debounce rapid refreshes
  3. 03Tie HTTP client closure to disposal
  4. 04Reusable Ref extension pattern

Use cases

  1. 01Stop requests when leaving a page
  2. 02Avoid duplicate rapid refresh requests

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/serverpod/skills-registry --skill riverpod-cancel

After installing, type/riverpod-cancelin Claude Code to confirm it loaded.

Details

From the project README

Riverpod — Cancelling and debouncing requests

Instructions

Use ref.onDispose together with auto-dispose (or ref.watch) to cancel in-flight requests when the user leaves the page, or to debounce rapid refreshes.

Cancelling when leaving the page

Ensure the provider is auto-dispose. When the user navigates away, the provider loses its listeners and is disposed; ref.onDispose runs. In that callback, cancel the request (e.g. close the HTTP client used for the request).

Example pattern: create an http.Client() in the provider, pass it to your fetch logic, and call ref.onDispose(client.close). When the provider is disposed, the client closes and the request is cancelled. Exact API depends on your HTTP package.

Debouncing refreshes

If the user triggers refresh multiple times quickly, you can delay the actual request until they stop (e.g. 500ms). Pattern:

  1. In the provider, set a flag (e.g. didDispose = false) and ref.onDispose(() => didDispose = true).
  2. await Future.delayed(duration).
  3. If didDispose is true, the user triggered another refresh during the delay; throw to abort (Riverpod catches and ignores). Otherwise create the client, register onDispose(client.close), and run the request.

So: delay first, then create client and run request; disposal during the delay aborts, disposal after creates client cancels the request.

Reusable extension

You can implement an extension on Ref that returns a debounced/cancellable client:

  • Use onDispose to set a "cancelled" flag.
  • Wait for the debounce duration; if disposed, throw.
  • Create the client, onDispose(client.close), return the client.

Use this extension in your activity/provider so all call sites get debounce + cancel behavior. See the official Riverpod "cancel" how-to for a full extension example.

Comments

Markdown supported