Description
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.