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

Question

我想在反应中将我的数据加载到 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)
                }
            })
     })

标签： javascriptfirebasegoogle-cloud-firestore

Answer 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);