How to migrate code after ref.state deprecation in Riverpod?

[YiannisBourkelis]

I just noticed that ref.state is deprecated, and I am using it in many providers in my application.
This is a simplified example of how I use it to get a list of invoices:

final invoicesListFutureProvider = FutureProvider.autoDispose
    .family<ApiPaginatedResponse<Invoice>, InvoicesFutureProviderParameters>(
        (ref, invoicesFutureProviderParameters) async {
          
  ref.onDispose(() {
    ref.state?.value?.paginator?.next_page_url = null;
  });

  var item = Invoice(id: 0)..queryString = invoicesFutureProviderParameters.queryString;
  var paginator = PaginatorRestService<Invoice>(item);

  return await getNext(item, paginator, ref.state)
      as ApiPaginatedResponse<Invoice>;
});

The ref.state.value?.paginator.next_page_url contains the URL of the next page of the result. So when I call:
ref.invalidate(invoicesListFutureProvider); it loads the next page, making use of the state.value?.paginator.next_page_url from the previous call.

Now that ref.state is deprecated, how should I migrate my code to be compatible with Riverpod?

[rrousselGit]

Refactor to an AsyncNotifier

[YiannisBourkelis]

Thank you, @rrousselGit, for your response!

I'm evaluating the best approach to migrate around 30 FutureProviders, some containing complex logic such as search and filtering. Based on your suggestion, I’ve experimented with both AsyncNotifier and StateNotifier.

I understand that your library evolves over time to improve state management, which sometimes leads to deprecations. To minimize the risk of having to refactor again in the near future, I’d like to make an informed decision.

Given the current state of Riverpod, would you recommend AsyncNotifier over StateNotifier, or do you see a strong case for preferring one over the other?

Below are my simplified implementations for handling data retrieval in an infinite scrolling list:

Using StateNotifier

final usersProvider =
    StateNotifierProvider<UsersNotifier, AsyncValue<List<User>>>((ref) {
  return UsersNotifier();
});

class UsersNotifier extends StateNotifier<AsyncValue<List<User>>> {
  UsersNotifier() : super(const AsyncValue.loading()) {
    loadMore(isFirst: true);
  }

  static const int firstPage = 1;
  int page = firstPage;
  bool isLoading = false;
  bool hasMore = true;

  Future<void> loadMore({bool isFirst = false}) async {
    if (isLoading) return;
    isLoading = true;

// Clear error state before loading new data
    state = state.hasError ? const AsyncValue.loading() : state;

    try {
      final newUsers = await UserService.fetchUsers(page);
      hasMore = newUsers.isNotEmpty;
      state = AsyncValue.data([
        if (!isFirst) ...state.value ?? [],
        ...newUsers,
      ]);
      page++;
    } catch (e) {
      state = AsyncValue.error(e, StackTrace.current);
    } finally {
      isLoading = false;
    }
  }

Using AsyncNotifier

final usersProvider = AsyncNotifierProvider<UsersNotifier, List<User>>(() {
  return UsersNotifier();
});

// Riverpod AsyncNotifier for user list
class UsersNotifier extends AsyncNotifier<List<User>> {
  static const int firstPage = 1;
  int page = firstPage;
  bool hasMore = true;
  bool isLoading = false;

  @override
  Future<List<User>> build() async {
    return await loadMore(isFirst: true);
  }

  Future<List<User>> loadMore({bool isFirst = false}) async {
    if (isLoading) return state.value ?? [];
    isLoading = true;
    try {
      final List<User> newUsers = await UserService.fetchUsers(page);
      hasMore = newUsers.isNotEmpty;

      // Explicitly define the type
      final List<User> updatedList = [
        if (!isFirst) ...?state.value,
        ...newUsers,
      ];

      page++;
      state = AsyncValue.data(updatedList);
      return updatedList;
    } catch (e, stack) {
      state = AsyncValue.error(e, stack);
      return state.value ?? [];
    } finally {
      isLoading = false;
    }
  }

  Future<void> refresh() async {
    page = firstPage;
    state = const AsyncValue.loading();
    await loadMore(isFirst: true);
  }
}

Would love to hear your insights on which approach is more future-proof and aligns better with Riverpod’s roadmap. Thanks in advance for your guidance!

[rrousselGit]

You're supposed to use AsyncNotiifier. That's a FutureProvider with bonuses.

[YiannisBourkelis]

Hi @rrousselGit,

I managed to refactor part of my codebase using AsyncNotifier, and it has been working well so far. Now, I’m trying to migrate my existing .family providers that accept parameters.

Use Case
I have a generic AutoDisposeAsyncListNotifier that handles list retrieval with pagination:

class AutoDisposeAsyncListNotifier<T extends RestSerializable<T>>
    extends AutoDisposeAsyncNotifier<List<T>> {
  bool hasMore = true;
  bool isLoading = false;
  Map<String, String>? queryString;
  String? _nextPageUrl;

  // Factory function to create instances of T
  final T Function(int id) createItem;

  // Constructor that accepts the factory function
  AutoDisposeAsyncListNotifier({required this.createItem});

  @override
  Future<List<T>> build() async {
    return await loadMore(isFirst: true);
  }

  Future<List<T>> loadMore({bool isFirst = false}) async {
    if (isLoading) return state.value ?? [];
    isLoading = true;
    try {
      // Use the factory function to create an instance of T
      final item = createItem(0)..readItemsNextPageUrl = _nextPageUrl;

      // Use the generic type with PaginatorRestService
      final paginator = PaginatorRestService<T>(item);

      // Fetch the data
      var result = await paginator.readItemsAsync();
      _nextPageUrl = result.paginator.next_page_url;
      if (result.hasError) {
        throw Exception(
            '${result.errorMessage} \n\n(Status Code: ${result.statusCode})');
      }

      hasMore = result.paginator.next_page_url != null;

      // Update the list
      final List<T> updatedList = [
        if (!isFirst) ...?state.value,
        ...result.paginator.data,
      ];

      state = AsyncValue.data(updatedList);
      return updatedList;
    } catch (e, stack) {
      state = AsyncValue.error(e, stack);
      return state.value ?? [];
    } finally {
      isLoading = false;
    }
  }

  Future<void> refresh() async {
    _nextPageUrl = null;
    state = const AsyncValue.loading();
    await loadMore(isFirst: true);
  }
}

Existing Implementations
I currently extend this generic class to create providers for various data types:

Vehicles List Provider
To receive a list of Vehicles I implement a VehiclesListNotifier that extends the generic AutoDisposeAsyncListNotifier

/// LIST ITEMS PROVIDER
final vehiclesListAsyncProvider =
    AsyncNotifierProvider.autoDispose<VehiclesListNotifier, List<Vehicle>>(() {
  return VehiclesListNotifier(
    createItem: (id) => Vehicle(id: 0), 
  );
});

/// LIST ITEMS NOTIFIER
class VehiclesListNotifier extends AutoDisposeAsyncListNotifier<Vehicle> {
  VehiclesListNotifier({required Vehicle Function(int id) createItem})
      : super(
          createItem: (id) =>
              Vehicle(id: id),
        );
}

Payment Methods List Provider
To recieve a list of payment methods I implement a PaymentMethodsListNotifier that extends the generic AutoDisposeAsyncListNotifier.

/// LIST ITEMS PROVIDER
final paymentMethodsListAsyncProvider = AsyncNotifierProvider.autoDispose<
    PaymentMethodsListNotifier, List<PaymentMethod>>(() {
  return PaymentMethodsListNotifier(
    createItem: (id) =>
        PaymentMethod(id: 0), 
  );
});

/// LIST ITEMS NOTIFIER
class PaymentMethodsListNotifier
    extends AutoDisposeAsyncListNotifier<PaymentMethod> {
  PaymentMethodsListNotifier(
      {required PaymentMethod Function(int id) createItem})
      : super(
          createItem: (id) =>
              PaymentMethod(id: id), 
        );
}

Invoices List with a Parameter
Now, I need to retrieve a list of Invoices, filtering by InvoiceType (e.g., issued, voided, etc.). I need to pass this parameter to the InvoicesListNotifier so it can be used in the query string.

I’m looking for something like this:

/// LIST ITEMS PROVIDER
final invoicesListAsyncProvider = AsyncNotifierProvider.autoDispose.FAMILY<
    InvoicesListNotifier, List<Invoice>, INVOICE_TYPE_ENUM>(() {
  return InvoicesListNotifier(
    createItem: (id) =>
        Invoice(id: 0)..queryString = INVOICE_TYPE_ENUM, 
  );
});

How can I correctly pass the InvoiceType parameter to the InvoicesListNotifier when using AsyncNotifierProvider.family?

I would appreciate your guidance on the best approach. Thanks in advance for your help!