两个方向无限滚动与 Firebase/Firestore 后端

Question

I would like to implement a two direction infinity scrolling using Firestore as backend and Vue.js as frontend. I don't want to load the full list from the beginning because the list could be huge ! If my approach is generally bad, please let me know what is the good one.

I have the following code (just the relevant part) working mostly well:

  up() {
    console.log("up()")
    let first = this.items[0]
    console.log("first: ", first.text, first.timestamp)
    db.collection("questions").orderBy("timestamp", "desc").endAt(first.timestamp).limit(this.itemsPerPage).onSnapshot((snapshot) => {
        this.updateItems(snapshot)
    })
  },
  down() {
    console.log("down()")
    let last = this.items[this.items.length - 1]
    console.log("last: ", last.text, last.timestamp)
    db.collection("questions").orderBy("timestamp", "desc").startAt(last.timestamp).limit(this.itemsPerPage).onSnapshot((snapshot) => {
        this.updateItems(snapshot)
    })
  },
  updateItems(snapshot) {
    console.log("updateItems()")
    const temp = []
    snapshot.forEach((item) => {
      temp.push(item.data())
    })
    this.items = temp
  },
  firstLoad() {
    db.collection("questions").orderBy("timestamp", "desc").limit(this.itemsPerPage).get().then((snapshot) => {
      this.updateItems(snapshot)
    })
  }

and here is the relevant part of the view:

<p>
{{items}}
</p>
<p>
  <a href="#" @click.prevent="up">UP</a>
</p>
<ul v-for="(item, index) in items">
  <li :key="index">#{{index}} {{item}}</li>
</ul>
<p>
  <a href="#" @click.prevent="down">DOWN</a>
</p>

but I cannot "move up" by more than one item, because of the limit() method always limiting the result set from the beginning. Is there any way to "invert" the limit() method when using endAt()? Here is an anim gif, how it's working now:

Unfortunately the anim gif is not visible, so here is the video: https://youtu.be/1AR44J92Yg4

Answer 1

There unfortunately is no API to get a fixed number of items near the end of a range in Cloud Firestore. Firebase's realtime database had a limitToLast for that purpose, but that API doesn't exist on Firestore.

You'll have to create a query with the reverse sort order, and then do a regular limit on that.

db.collection("questions").orderBy("timestamp").startAt(first.timestamp).limit(this.itemsPerPage)

This means that you'll get the results from that query in the reverse order of what you want, so you'll have to invert how you add them to the UI too.

All of this is rather awkward for this specific use-case, so I'd recommend filing a feature request for getting a limitToLast method or reverse method on a query.

Just in case you're interested, this was my testbed for these queries: https://jsbin.com/dimuvu/edit?js,output