引言

很高興我們可以又見面了＾＿＿＿＿＾
今天我們一樣要來分享怎麼自己刻一個分頁功能
這樣做有什麼好處呢？
第一個，就是我們在瀏覽的時候
不需要一次性看到百筆多筆資料
再來是撈取資料的性能上也很有幫助
那現在就開始吧！

老話一句，來一個Typescript

當我們需要實現分頁功能時
首先要做的是獲取我們的數據
Firebase提供了一些方法
讓我們能夠輕鬆地獲取我們的資料

首先，讓我們回到熟悉的檔案firebase.ts
目前這是我們之前設置Firebase連接和溝通的地方

DocumentData: 這是我們的資料對象，它包含我們需要顯示的信息
orderBy: 這個方法可以對資料進行排序，是分頁功能必備
startAfter: 指定上一頁查詢的最後一筆資料
limit: 限制獲取的資料數量，這是實現分頁的關鍵。

import {
  getFirestore,
  collection,
  addDoc,
  doc,
  getDoc,
  deleteDoc,
  setDoc,
  query,
  where,
  getDocs,
  DocumentData,
  orderBy,
  startAfter,
  limit,
} from 'firebase/firestore'

getBookPages 函數接受兩個參數
pageSize 表示每頁要顯示多少筆資料
currentPage 表示當前頁碼

bookInfo 則是我們的集合名稱

export const getBookPages = async (pageSize: number, currentPage: number) => {
  let lastVisibleDoc: DocumentData | null = null;

  const collectionRef = collection(db, 'bookInfo');
  const orderedQuery = query(collectionRef, orderBy('bookTitle'));
  const pageQuery = query(orderedQuery, startAfter(lastVisibleDoc), limit(pageSize));

  const queryDocs = await getDocs(pageQuery);

  if (!queryDocs.empty) {
    queryDocs.docs.forEach((doc) => {
      const data = doc.data() as DocumentData;
      console.log(data);
    });

    lastVisibleDoc = queryDocs.docs[queryDocs.docs.length - 1];

    currentPage++;
    return;
  }
  lastVisibleDoc = null;
  console.log('沒資料');
};

最後，我們更新 lastVisibleDoc
將其設置為最後一個資料
同時增加 currentPage
表示我們已經處理了一頁的資料

如果 queryDocs 為空
則將 lastVisibleDoc 設置為 null
表示沒有更多的資料可以加載

這樣，這段程式碼實現了分頁功能
每次調用 getBookPages 函數

可以加載指定頁碼的書籍資料

(示意圖)

下一步我們會繼續完整這整個流程與功能
感謝各位讀者們^^