Cleanest way to watch for several async providers without nesting AsyncValue.when

[nicolasbraun]

Hello,

I am wondering what is the most elegant way to deal with cases like this:

• imagine an app for event
• on an event page there is:
  • some basing event info (place, date..)
  • the list of members
• if the user is admin he has an edit button next to each member name

So to properly build this page I need to wait for 3 providers:

// One provider to get the even "general" information and the ID's of admins
@riverpod
Future<Event> event(EventRef ref, int eventId) {
  final eventRepo = ref.watch(eventRepoProvider);
  return eventRepo.fetchEvent(id: eventId);
}

// One provider to get the list of members
@riverpod
Future<List<Member>> eventMembers(EventMembersRef ref, int eventId) {
  final eventMembershipsRepo = ref.watch(eventRepoProvider);
  return eventMembershipsRepo.getMembers(id: eventId);
}

// One provider to know if the current user is admin
@riverpod
Future<bool> isCurrentUserAdmin(IsCurrentUserAdminRef ref, int eventId) {
  final userId = ref.watch(authRepoProvider).currentUser.uuid;
  final event = await ref.watch(eventProvider(eventId));
  return event.admins.contains(userId);
}

Now in my UI how can I gracefully wait on these 3 providers to be ready (aka AsyncValue has a value) without nesting 3 asyncValue.when (or any other helper)?

Ideas

Using a new provider that returns all data
The first thing that comes to mind would be to use so kind of "wrapper' provider that wait for the others but it's a lot of code (defining a return type + the provider)

@riverpod
Future<AComplexReturnObject> eventPage(EventPageRef ref, int eventId) {

   final isAdmin = await ref.watch(isCurrentUserAdmin(eventId));
   final members = await ref.watch(eventMembersProvider(eventId));
   final event = await ref.watch(eventProvider(eventId));
  
   return AComplexReturnObject(
       idAdmin: isAdmin,
       event: event,
       members: members);
}

Using an "is ready" provider

@riverpod
Future<bool> eventPageisLoading(EventPageReadyForDisplay ref, int eventId) {

   final isAdminProvider = ref.watch(isCurrentUserAdmin(eventId));
   final membersProvider = ref.watch(eventMembersProvider(eventId));
   final eventProvider= ref.watch(eventProvider(eventId));
  
   return isAdminProvider.isLoading() || membersProvider.isLoading() || eventProvider.isLoading()
}

[idispatch75]

Maybe a nice generic API can be created for that. A possible starting point could be the wait on a record of futures. Write (Future.value(1), Future.value(1)).wait and navigate to wait. It transforms a record of futures into a future of a record. Pretty nice and much cleaner than Future.wait.
The same principle could probably be applied to a record of AsyncValue.

[gdurandrexel]

A possible implementation here : #1722 (comment)

[nicolasbraun]

i'm new to Flutter (and Dart) but doesn't it feel "edgy" ? + it only works for 2/3 providers.

[gdurandrexel]

That's how it is implemented by the flutter team for Future of record, and they go up to 9 values.
That's not uncommon for utility classes, even in other languages.

This type of implementation provides a type-safe alternative to folding over an Iterable, where you would end up with a List<Object> where you have to forcefully cast each list item, with all the risks it entails.

[nicolasbraun]

Thanks for pointing that out !

I'll dive into it then :)