Как мне разбить на страницы облачный Firestore?

#firebase #react-native #google-cloud-firestore

#firebase #react-native #google-cloud-firestore

Вопрос:

Мне нужно получить на 50 документов больше сообщений из Cloud Firestore, когда я нажимаю на кнопку загрузить больше сообщений в react-native.

Вот в приведенном ниже моем коде при открытии моего приложения я получаю 50 документов, но не все сообщения.

 getMessagesFrom(usr){
    return db.collection("ppl/"   usr   "/messages/").orderBy("createdAt", "desc").limit(50).get().then(snapshot => {
        this.docs = snapshot.docs;
        let l = this.docs.length;
        for (let i = 0; i < l; i  ) {
            this.dblid = this.state.myId   usr;
            if (this.msgObj[this.dblid] === undefined) {
                this.msgObj[this.dblid] = [this.docs[i].data()];
            } else {
                this.msgObj[this.dblid] = [...this.msgObj[this.dblid], this.docs[i].data()]
            }
            if (i === l - 1) {
                return this.msgObj;
            }
        }
        return false;
    });
}
  

Я ожидаю получить на 50 документов больше, нажав на кнопку «Дополнительные сообщения».

Комментарии:

1. Вы можете использовать startAfter(50) перед limit

2. Спасибо, СиСа, я использовал, но не знаю, как сохранить lastdoc

Ответ №1:

Из документации:

Используйте методы startAt() или startAfter (), чтобы определить начальную точку для запроса. Метод startAt() включает начальную точку, в то время как метод startAfter() исключает ее.

Для управления страницами вы можете создать состояние для сохранения номера вашей страницы и увеличивать его каждый раз, когда получаете данные

 const pageSize = 50;     // your page size
state = { pageNum: 0 };  // your page number

getMessagesFrom(usr){
    return db.collection("ppl/"   usr   "/messages/")
      .orderBy("createdAt", "desc")
      .startAt(this.state.pageNum * pageSize) // here we set start point
      .limit(pageSize)
      .get().then(snapshot => {

          this.setState({ pageNum: pageNum 1 });

          ...your code

    });
}
  

Комментарии:

1. Как бы вы разбили на страницы «назад»? И как бы вы разбили на страницы определенный индекс? как при нажатии на число: < 1 2 3 4 5 6 7 >