Next.js/Firebase - 如何創建無限滾動？

Question

我對如何使用 firebase Firestore 在 next.js 中創建無限滾動元素有點迷茫。

我正在嘗試在我的 api 文件上使用“我的 api”並使用 firestore。

我給 api 的電話現在是這樣的。 我有一個名為 data 的列表，我向我的 api 發送請求並獲取前 9 個（限制參數）文檔。

useEffect(() => {
  console.log("useEffect");
  const getImage = async () => {
    const req = await fetch(`api/firebase?limit=9`, {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
      },
    });
    const data = await req.json();
    return data;
  };
  getImage().then((data) => {
    setData(data);
  });
}, []);

我的請求處理是這樣的：

if (req.method === "GET") {
  const qu = req.query;
  const max = qu.limit;
  const q = query(collection(db, "images"), limit(max));
  const querySnapshot = await getDocs(q);
  const data = querySnapshot.docs.map((doc) => {
    return {
      label: doc.data().label,
      url: doc.data().url,
      id: doc.id,
    };
  });
  res.status(200).json(data);
}

我已經嘗試/查看了 react-infinite-scroll-component，我想我可以讓它工作，但我不知道如何從 firebase 獲取我的 api 的下 9 個文檔。

在 firestore 上有startAfter()它接受 documentSnapshot 不是一個 id 但我可以通過保存最后一個文檔發送的 id 並使用 getDoc 調用它並在此之后開始，但我不知道如何實現它想到我的 api 電話。 假設我的 Firestore 上有 27 個文檔，我用 useEffect 調用前 9 個文檔，我是否需要另一個 function 來調用和更新我的數據？ 我可以嘗試將最后一個 id 作為參數和更新發送，但這會變得復雜，我不知道是否有簡單的方法。

Answer 1

查看無限滾動的工作原理，通常您會有兩個單獨的查詢：

1. 查詢第一批（不帶startAfter）
2. 用於加載更多內容的查詢（完全相同的查詢，但使用 startAfter()）

您實際上可以查看此快速指南，了解使用 Firebase 進行無限滾動。

現在，在您使用 API 的情況下，在沒有任何設置順序的情況下，文檔 ID 用作排序順序。 在這種情況下，您可以簡單地使用 where 子句來檢索 ID 大於或小於您指定的 ID 的所有文檔。

例如： where(FieldPath.documentId(), ">", id) 。

Answer 2

如果其他人偶然發現這樣的問題，這就是我解決它的方法

我將此 if 語句添加到我的 api 處理程序中，該處理程序檢查我是否通過調用發送 docID 參數並獲取具有該 ID 的文檔，然后我將該文檔發送到 startAfter。

if (qu.docID) {
  const id = qu.docID;
  const max = qu.limit;

  const idquery = query(
    collection(db, "images"),
    where("__name__", "==", id)
  );

  const documentSnapshots = await getDocs(idquery);
  const lastVisible =
    documentSnapshots.docs[documentSnapshots.docs.length - 1];

  const next = query(
    collection(db, "images"),
    orderBy("createdAt", "desc"),
    startAfter(lastVisible),
    limit(max)
  );
  const querySnapshot = await getDocs(next);
  const data = querySnapshot.docs.map((doc) => {
    return {
      label: doc.data().label,
      url: doc.data().url,
      id: doc.id,
    };
  });
  res.status(200).json(data);
}

就像 Jose German 說的我創建了另一個 function 來加載更多

const getNext = async (docID) => {
console.log("getNext");
const req = await fetch(`api/firebase?limit=9&docID=${docID}`, {
  method: "GET",
  headers: {
    "Content-Type": "application/json",
  },
});

const data = await req.json();
return data;
};

最后，我使用react-infinite-scroll-component的 next={} 來調用我的第二個 function 並經過一些調整后它起作用了