当与 .limitToLast 一起用于分页时，如何仅使用 .onSnapshot 从 firebase 获取新文档

Question

我正在尝试使用 Firebase 实现具有无限滚动功能的聊天应用程序。问题是，如果我在添加新消息时不清空我的消息数组，那么它们就会重复。如果我清空消息数组，那么它不会保留以前的消息。

代码如下：

  getAllMessages(matchId: string) {
    this.chatSvc.getAllMessages(matchId)
      .orderBy('createdAt', 'asc')
      .limitToLast(5)
      .onSnapshot((doc) => {
        if (!doc.empty) {
          this.messages = [];
          doc.forEach((snap) => {
            this.messages.push({
              content: snap.data().content,
              createdAt: snap.data().createdAt,
              sendingUserId: snap.data().sendingUserId,
              receivingUserId: snap.data().receivingUserId
            });
          });
        } else {
          this.messages = [];
        }
      });
  }

以及returns参考的聊天服务：

  getAllMessages(matchId: string): firebase.firestore.CollectionReference<firebase.firestore.DocumentData> {
    return firebase
    .firestore()
    .collection(`matches`)
    .doc(`${matchId}`)
    .collection('messages');

  }

我正在将集合中的消息推送到消息数组中。如果我不添加 'this.messages = []' 那么每次向集合中添加新消息时它都会重复消息。

我如何只使用 onSnapshot 从 firebase 获取新文档，而不是再次遍历所有集合？我只想要最后一条消息，因为我将使用另一个检索以前消息的查询来实现无限滚动。

如有任何帮助，我们将不胜感激。

Answer 1

每当出现与条件匹配的新条目时，查询将始终 return 最后 5 个结果，这将创建重复项。你能做的就是listen to changes between snapshots

getAllMessages(matchId: string) {
    this.chatSvc.getAllMessages(matchId)
      .orderBy('createdAt', 'asc')
      .limitToLast(5)
      .onSnapshot((snapshot) => {
        snapshot.docChanges().forEach((change) => {
          // push only new documents that were added
          if(change.type === 'added'){
           this.messages.push(change.doc.data());
          }
        });
      });
  }

当与 .limitToLast 一起用于分页时，如何仅使用 .onSnapshot 从 firebase 获取新文档

How do I only get new documents from firebase using .onSnapshot when used with .limitToLast for pagination

firebase

pagination

infinite-scroll