Firestore脱机持久性在更新文档后从缓存中删除数据（带有反应）

Question

上下文

我有一个使用Firestore和React的网络应用程序，我在其中获取具有此结构的数据：

worksTodo:
  title
  status
  createdAt

我有一个页面，我从firestore获取数据列表，并使用orderBy（）和limit（）方法查询这些数据：

todosRef.orderBy('status', 'desc')
        .orderBy('createdAt', 'desc')
        .limit(n)
        .onSnapshot((querySnapshot) => {
            // getting data and setState here...
        });

我还使用react-router v4和history来重定向事件后的网页。

我做了codepen to reproduce the bug here。 （上面的代码是第82到108行）

问题

在更新少量文档status字段后，所有优于我的限制查询（n = 5）的数据将逐一从缓存中删除，这是不期望的。

我使用此代码（第189到195行）：

更新文档

todosRef.doc(match.params.id).update({
            title,
            status,
        }).then(() => {
            console.log('document updated');
            history.push('/');
        }).catch((err) => console.error(err));

复制步骤

要重现该错误，请在codepen page：

上按照以下步骤操作

1. 点击标题上的Todo List
2. 点击“重置数据”以确保所有状态都设置为“正在进行中”
3. 点击第一个任务
4. 使用选择输入字段
将此任务的状态从“进行中”修改为“已完成”
5. 提交
6. 重复步骤2,3和4，直到错误触发
7. 列表中的任务一个接一个地消失，直到剩下4个任务。
8. 您需要从chrome dev工具的indexedDB标签中删除firestore Application，然后刷新以获取所有数据

我尝试了什么

当我禁用离线持久性时，错误完全消失。所以我确信它与离线持久性有关。

我首先联系了firebase的支持团队，但是当我使用第三方框架（反应）时，他们无法帮助我，并建议我在这里寻求帮助。

我还咨询了这个stackoverflow问题：Firestore - Using cache until online content updates 但答案提到：

  

“获得缓存结果后，Firestore将检查服务器以查看您的查询结果是否有任何更改。如果是，您将获得另一个包含更改的快照。”

然而，在这种情况下，似乎firestore发现来自服务器的数据与来自缓存的数据没有区别。

问题

如何确保缓存中的数据与服务器中的数据完全相同？

修改

我刚刚发现在SO上已经存在一个非常类似的案例问题：

Error when limiting items with Firestore

在这种情况下，错误发生在angular，它巩固了问题来自firebase SDK的想法。