How to cache rxdart streams in flutter for infinite scroll

Question

class PollScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    bloc.paginatePolls(null, null);

    return StreamBuilder(
        stream: bloc.polls,
        builder: (context, AsyncSnapshot<List<PollModel>> snapshot) {
          if (snapshot.data == null || snapshot.data.length < 1) {
            return Text('loading...');
          }

          return ListView.builder(
            itemCount: snapshot.data.length,
            itemBuilder: (context, int index) {
              final PollModel curItem = snapshot.data[index];

              return Card(
                   //Render Logic
                );
            },
          );
        });
  }
}

class Bloc {
  final Repository _repository = Repository();
  final PublishSubject<List<PollModel>> _polls = PublishSubject<List<PollModel>>();

  Observable<List<PollModel>> get polls => _polls.stream;

  paginatePolls(int count, String last) async {
    final List<PollModel> polls = await _repository.paginatePolls(count, last);

    _polls.sink.add(polls);
  }

  dispose(){
    _polls.close();
  }
}
final bloc = Bloc();

I am from react native background in terms of mobile dev and I have used tools like apollo and redux so rxdart is a little bit confusing for me. paginatePolls just retrieves simple list of objects from the server and adds to the stream and PollScreen class is rendering the result. Everything works fine but I am curious how I can cache the first paginatePolls requests so that I can make subsequent queries with count (number of docs to return) last (id of the last item returned from previous result) and simply append the result to what is already there.

In apollo and redux I would just be adding more and more docs to the cache as I make more requests but since rxdart is a stream, I am unsure of which approach is the most effective.

I have thought of cacheing with sqlite but seems like a huge over kill + unsure if it would be fast enough.

Next method I have thought of is just to create a list in the bloc and keep adding items to it as more requests are made. Then stream the whole list every time. But this would mean re-creating the entire list for every stream e.g. first request render 1-50, second render 1-100, third render 1-150 where what would be preferable is - first render 1-50, second render 51-100 and just attach below the first render, etc.

How do you implement counterparts of apollo and redux cache in flutter using rxdart?

Answer 1

I've been stuck on this similar problem. I was thinking of keeping a Map in my repository (class where you make your network requests) and just do a look up in the map from there. But I am having issues with this, since I use the "compute" method, and whatever you pass into the "compute" function cannot be a instance method. (https://flutter.dev/docs/cookbook/networking/background-parsing)

I looked online and a few people advise against a global bloc, I am from a React Native + Redux background as well, but I really want to use the bloc pattern the right way, wish there were better examples out there.