How to Cancel HTTP Requests with CancelToken and Riverpod

Did you know?

CancelToken lets you cancel HTTP requests on demand.

It’s great for optimizing network usage, improving UX, and handling timeouts.

Use it to stop unnecessary data fetches when users navigate away or to implement “cancel” buttons in your Flutter apps.

*How to use CancelToken with Dio and Riverpod*

Example code

import 'package:dio/dio.dart';
import 'package:riverpod_annotation/riverpod_annotation.dart';
 
@riverpod
Future<TMDBMoviesResponse> fetchMovies(
  FetchMoviesRef ref, {
  required int page,
}) async {
  // 1. Create the CancelToken
  final cancelToken = CancelToken();
  // 2. Cancel it on dispose
  ref.onDispose(() => cancelToken.cancel());
  // 3. Pass it along when making a request
  return nowPlayingMovies(
        page: page,
        cancelToken: cancelToken,
      );
}
 
Future<TMDBMoviesResponse> nowPlayingMovies(
    {required int page, CancelToken? cancelToken}) async {
  final uri = Uri(/* uri params */);
  final response = await dio.getUri(uri, cancelToken: cancelToken);
  return TMDBMoviesResponse.fromJson(response.data);
}