Firestore 分页：更新的实时数据在页面之间意外移动

Question

我正在使用 Firestore 并按

orderBy

顺序将

updatedAt

设置为

descending

来查询数据，并将结果限制为每页 2 个项目（用于测试目的）。但是，我在更新数据时遇到了意外行为。

当我更新第二页上最旧的项目以具有最新的 updateAt 时间戳时，它会移动到第一页上的第一个位置，从而有效地将其从第二页中删除。此外，第一页上的第二项也会被删除。

具体情况如下：

初始状态：

Page 1: ['item1', 'item2'] (no `startAfter` specified)
Page 2: ['item3', 'item4'] (starting after 'item2')

更新item4后（updatedAt更改为latest）：

Page 1: ['item4', 'item1']
Page 2: ['item3']

但是，我的预期结果是：

Page 1: ['item4', 'item1']
Page 2: ['item2', 'item3']

// Query example
const query = firestore.collection('myCollection')
                     .where('tests', 'array-contains', `test`)
                     .orderBy('updatedAt', 'desc')
                     .limit(2)
                     .startAfter(startAfterVar)
                     .onSnapshot(snapshot => { 
                       // Do something to store
                     });

非常感谢您为解决此问题提供的帮助。谢谢！

更新1：

问：所以你基本上是说 item2 被从数据库中删除了？或者只是不显示？

A：基本上，item2 不会显示，也不会从 DB 中删除。

问：您可以编辑您的问题并添加您的数据库结构作为屏幕截图吗？

A：数据结构：

myCollection (collection)
  |
  --- item1 (document)
       |
       --- tests: [array string]
       --- updatedAt: [timestamp]
       --- otherFields: ...

更新2：

我正在使用查询实现无限分页

更新3：

更新了主题集合的屏幕截图

我的实际查询是

// Query example
const query = firestore.collection('topics')
                     .where('members', 'array-contains', userID)
                     .orderBy('lastLoggedAt', 'desc')
                     .limit(2)
                     .startAfter(startAfterVar)
                     .onSnapshot(snapshot => { 
                       // Do something to store
                     });

Answer 1

免责声明：实时监听器的分页是很难。

您所描述的是预期行为。从这个数据集开始：

[item1, item2, item3, item4]

当您设置第一个侦听器时，您会阅读

item1

和

item2

的两个文档。然后，您创建第二个侦听器以在

item2

之后启动，然后读取

item3

和

item4

。

现在您将

item4

更改为排序顺序中的第一个。于是就变成了：

[item4, item1, item2, item3]

所以第一个听众现在看到

item4

和

item1

。但第二个侦听器仍然在

item2

之后启动，因此它只能看到

item3

并且您有效地隐藏了

item2

。

---

由于移动项目会更改其后所有页面的光标，因此您需要将所有侦听器重新定位到新的光标文档。因此，您需要分离所有侦听器并重新创建它们，或者为现有侦听器之间的文档创建其他侦听器。

这正是 FirebaseUI 库仅支持没有实时侦听器的分页的原因：实时数据更新的分页很困难。