在结果之上使用实时添加对 Firestore 数据进行分页答案

【问题标题】：Paginating firestore data with realtime additions on top of the result在结果之上使用实时添加对 Firestore 数据进行分页
【发布时间】：2020-06-10 15:17:00
【问题描述】：

我想在反应中将我的数据加载到 10 个块中。我正在使用 onSnapshot() firestore 方法监听文档添加。我想对数据进行分页，同时允许最近添加的内容出现在顶部。如何在下面的代码中应用它 -

db.collection('palettes').orderBy("createdAt").onSnapshot(snapshot => { 
    snapshot.docChanges().forEach(change => {

          if (change.type === "added") {
               setPalette( prevPalette => ([
                   { id: change.doc.id, ...change.doc.data() },
                     ...prevPalette
                    ]))
                    setIsLoading(false)
                }
            })
     })

【问题讨论】：

标签： javascript firebase google-cloud-firestore

【解决方案1】：

我认为您应该保存最后一个文档的状态以进行分页和实时更新

示例


const getPalettes = (pageSize, lastDocument) => new Promise((resolve, reject) => {
  let query = db.collection('palettes')
    .orderBy("createdAt")

  if(lastDocument) {
    query = query.startAt(lastDocument)
  }

  query = query.limit(pageSize);

  return query.onSnapshot(query => {
    const docs = query.docs.map(pr => ({pr.id, ...pr.data()}))
    resolve(docs);
  });
})

let unsubscribe = getPalettes(10).then(newPalettes => {
  setPalette(palettes => [...palettes, newPalettes]);
  lastPalette = newPalettes[newPalettes.length -1];
  setLastPalette(lastPalette);
  unsubscribe();
})

unsubscribe = getPalettes(10, lastPalette).then(newPalettes => {
  setPalette(palettes => [...palettes, newPalettes]);
  lastPalette = newPalettes[newPalettes.length -1];
  setLastPalette(lastPalette);
  unsubscribe();
})


const listenForLatestPalettes = (lastDocument, callback) => {
  return db.collection('palettes')
    .orderBy("createdAt")
    .startAt(lastDocument)
    .onSnapshot(callback);
}

const callback = snapshot => {
  for(let change of snapshot.docChanges()) {
    if (change.type === "added") {
      setPalette(palettes => {
        const palette = { id: change.doc.id, ...change.doc.data() };
        return [...palettes.filter(pal => pal.id !== id], palette];
      })
    }
  }
}

unsubscribe = listenForLatestPalettes(lastDocument, callback);

【讨论】：