[Question] How to implement infinite-scrolling with multiple listeners?

[xerroxcopy]

I am building a news site, in which articles and their favorite counts are shown. Favorite counts are stored in each article document's favorite_count field. I would like to implement infinite-scrolling feature (right now it's implemented as "load more" button).

Though I understand that pagination on vuexfire hasn't been documented yet, with the help of this post I could actually implement the 'load more' feature itself, with the cost of reactivity. I bind the first 20 articles as the first batch articlesFirstBatch. The second 20 articles bound to articlesNextBatch. The third batch is fetched by re-binding to the existing articlesNextBatch, which works fine for displaying articles. The problem is that the listener to the overwritten batches are lost and any changes to their favorite counts won't be shown. This is because I am re-binding to the exact same array. The fav count value itself in firestore increments/decrements as intended, but not reactively displayed. I would like to add listers to each batches as explained in this Firebase pagination tutorial video. Is this possible?

As a vue/js noob, all the options I could think of were as follows:

OPTION 1

Almost-infinite-scrolling. Just bind as many batches as I can, as in articlesFirstBatch 1-20 articles, articlesSecondBatch 21-40 articles, ..., articlesHundredthBatch, 181-200 articles. Then I can use getters to concatenate them into one giant array of articles, but even I know this is dumb:

const getters = {
  articles: state => {
    return [
      ...state.articlesFirstBatch, 
      ...state.articlesSecondBatch,
      ...state.articlesThirdBatch, ] // ...and so on
  }
 } 

OPTION 2

Keep listeners count to 1 or 2, and fake reactivity. When fav/unfav button is clicked, just increment/decrement the value manually. This will lose reactivity to the favs/unfavs from other users, but it's acceptable at least in my case.

OPTION 3

Store fav counts in another collection and retrieve all fav counts from top to bottom, e.g., 1st batch: 1-20, 2nd batch 1-40, 3rd batch loads 1-60 articles. This kind of kills the whole point of pagination/infinite-scrolling.

Opt 1 is the closest to what I intend, but it's super-dumb. I feel none of them are good way. Any help is appreciated. If this question is not appropriate as an issue, I close this and post it to stackoverflow or something, but all I could trust was here. Thank you.

[LaundroMat]

I have a similar question. I have a collection of over 20.000 items and I would like to present them in an infinite scroller.

Them problem is that when the scroller is rendered, I have triggered 20K reads on my collection. How can I do partial reads on this large collection?

[posva]

Hi, thanks for your interest but Github issues are for bug reports and feature requests only. You can ask questions on the forum, the Discord server or StackOverflow.

[cookmscott]

@LaundroMat did you find a solution? If you did, would be nice to document here since this is first hit on google for "vuefire pagination"