Пагинация Firestore добавляет массив в неправильном порядке

Question

Я пытаюсь разбить свои сообщения на страницы от самых новых до самых старых (снизу вверх).Мой запрос работает, но он добавляет массив в неправильном порядке после запроса новых сообщений.Я следовал за этой статьей.Это моя логика:

//Global variables
let start = null
let end = null

collectionRef
      .orderBy('createTimestamp', 'desc')
      .limit(10)
      .get()
      .then(snapshot => {
        start = snapshot.docs[snapshot.docs.length - 1]
        if (start) {
          const listener = collectionRef
            .orderBy('createTimestamp')
            .startAt(start)
            .onSnapshot(messages => {
              messages.docChanges().forEach(change => {
                const message = this.convertObjectTimestampPropertiesToDate({
                  id: change.doc.id,
                  ...change.doc.data()
                })
                if (change.type === 'added') {
                  store.commit('chats/addMessage', message)
                }
              })
            })
          store.commit('chats/setObserver', listener)
        }
      })

Если я нахожусь в верхней части списка сообщений, то я запускаю эту функцию (И это та часть, где порядок моих сообщений меняется неправильно. Он перемещает самые большие элементы меток времени вверх инебольшие метки времени в нижней части, что неправильно.):

async getMoreMessages() {
    collectionRef
          .orderBy('createTimestamp', 'desc')
          .startAt(start)
          .limit(10)
          .get()
          .then(snapshot => {
            end = start
            start = snapshot.docs[snapshot.docs.length - 1]
            const listener = collectionRef
              .orderBy('createTimestamp')
              .startAt(start)
              .endBefore(end)
              .onSnapshot(messages => {
                messages.forEach(message => {
                  const mappedMessage = this.convertObjectTimestampPropertiesToDate(
                    {
                      id: message.id,
                      ...message.data()
                    }
                  )
                  store.commit('chats/addMessage', mappedMessage)
                })
              })
            store.commit('chats/setObserver', listener)
          })
       }

Моя мутация Vuex, которая добавляет сообщение в массив:

addMessage: (state, message) => {
    const exists = state.messages.find(m => {
      return m.id === message.id
    })
    if (!exists) {
      state.messages.push(message)
    }
},

Вот визуализация того, что происходит:

А это консольный журнал отметок времени после запуска getMoreMessages():

    TEXT 9 TIMESTAMP Wed Sep 25 2019 16:14:09 GMT+0300 (Eastern European Summer Time)
chats.mutations.js?7021:29 TEXT 10 TIMESTAMP Wed Sep 25 2019 16:14:10 GMT+0300 (Eastern European Summer Time)
chats.mutations.js?7021:29 TEXT 11 TIMESTAMP Wed Sep 25 2019 16:14:11 GMT+0300 (Eastern European Summer Time)
chats.mutations.js?7021:29 TEXT 12 TIMESTAMP Wed Sep 25 2019 16:14:12 GMT+0300 (Eastern European Summer Time)
chats.mutations.js?7021:29 TEXT 13 TIMESTAMP Wed Sep 25 2019 16:14:13 GMT+0300 (Eastern European Summer Time)
chats.mutations.js?7021:29 TEXT 14 TIMESTAMP Wed Sep 25 2019 16:14:14 GMT+0300 (Eastern European Summer Time)
chats.mutations.js?7021:29 TEXT 15 TIMESTAMP Wed Sep 25 2019 16:14:15 GMT+0300 (Eastern European Summer Time)
chats.mutations.js?7021:29 TEXT 16 TIMESTAMP Wed Sep 25 2019 16:14:16 GMT+0300 (Eastern European Summer Time)
chats.mutations.js?7021:29 TEXT 17 TIMESTAMP Wed Sep 25 2019 16:14:18 GMT+0300 (Eastern European Summer Time)
chats.mutations.js?7021:29 TEXT 18 TIMESTAMP Wed Sep 25 2019 16:14:19 GMT+0300 (Eastern European Summer Time)
chats.mutations.js?7021:29 TEXT 1 TIMESTAMP Wed Sep 25 2019 16:13:24 GMT+0300 (Eastern European Summer Time)
chats.mutations.js?7021:29 TEXT 2 TIMESTAMP Wed Sep 25 2019 16:13:43 GMT+0300 (Eastern European Summer Time)
chats.mutations.js?7021:29 TEXT 3 TIMESTAMP Wed Sep 25 2019 16:13:50 GMT+0300 (Eastern European Summer Time)
chats.mutations.js?7021:29 TEXT 4 TIMESTAMP Wed Sep 25 2019 16:14:05 GMT+0300 (Eastern European Summer Time)
chats.mutations.js?7021:29 TEXT 5 TIMESTAMP Wed Sep 25 2019 16:14:06 GMT+0300 (Eastern European Summer Time)
chats.mutations.js?7021:29 TEXT 6 TIMESTAMP Wed Sep 25 2019 16:14:07 GMT+0300 (Eastern European Summer Time)
chats.mutations.js?7021:29 TEXT 7 TIMESTAMP Wed Sep 25 2019 16:14:08 GMT+0300 (Eastern European Summer Time)
chats.mutations.js?7021:29 TEXT 8 TIMESTAMP Wed Sep 25 2019 16:14:08 GMT+0300 (Eastern European Summer Time)

Не могу понять, что яделаю неправильно.Кажется, что запрос работает нормально, но логика добавления не работает.Я попытался сделать unshift() вместо .push() и упорядочить по метке времени на веб-интерфейсе, но он также имеет неправильный порядок.Любая помощь очень ценится!

Answer 1

Вам не хватает 'desc' в заказе?По умолчанию Firestore будет использовать asc, но я вижу, что при первом вызове вы указываете desc.