Vuexfire bindFirebaseRef with pagination infinite scroll

问题

Question: How can I add pagination (infinite scroll) to my binded Firestore VuexFire reference without re-querying previously retrieved (and binded) results?

Background: I am currently using VuexFire firestore binding to fill a timeline for most upvoted posts, as an action, in my Vuex store like this:

  fillTimeLine: firebaseAction(
    ({ bindFirebaseRef }) => {
      bindFirebaseRef(
        'timelineResults',
        db
          .collection('POSTS')
          .orderBy('combined_vote_score', 'desc')
          .limit(30)
      )
    })

This will retrieve the top 30 highest rated posts in my firestore database to my vuex state variable timelineResults.

To add pagination I have found a non-VuexFire example like this: How to paginate or infinite scroll by number of items in firestore?

var first = db.collection("....").orderBy("price", "desc").limitTo(20);

return first.get().then(function (documentSnapshots) {
  // Get the last visible document
  var lastVisible = documentSnapshots.docs[documentSnapshots.docs.length-1];
  console.log("last", lastVisible);

  // Construct a new query starting at this document,
  // get the next 25 cities.
  var next = db.collection("....")
          .orderBy("price", "desc")
          .startAfter(lastVisible)
          .limit(20);
});

Is there a way to combine the two examples and append results to a binded reference?

回答1:

You could create a more generic action, just like this:

bindRef: firestoreAction(({ bindFirestoreRef }, { name, ref }) => {
  bindFirestoreRef(name, ref);
}),

And then using it like:

this.bindRef({
  name: 'timelineResults',
  ref: db
    .collection('POSTS')
    .orderBy('combined_vote_score', 'desc')
    .limit(30),
});

There you can change the ref according to your needs. In this case, when you detect the scroll limit:

// lastVisible: using the array position from the previous binding
// since with vuex's bound data you cannot get the snapshots
this.bindRef({
  name: 'timelineResults',
  ref: db
    .collection('POSTS')
    .orderBy('combined_vote_score', 'desc')
    .startAfter(lastVisible)
    .limit(20),
});

来源：https://stackoverflow.com/questions/53367835/vuexfire-bindfirebaseref-with-pagination-infinite-scroll

标签

Vue.js

pagination

google-cloud-firestore

vuex

vuexfire