Firestore Pagination with Cursors — Efficient Large Dataset Navigation

// Forward pagination
import { collection, query, orderBy, limit, startAfter, getDocs } from 'firebase/firestore';

let lastVisible = null;
const PAGE_SIZE = 20;

async function loadNextPage() {
  let q;

  if (lastVisible) {
    // Start after the last document from previous page
    q = query(
      collection(db, 'users'),
      orderBy('createdAt', 'desc'),
      startAfter(lastVisible),
      limit(PAGE_SIZE)
    );
  } else {
    // First page
    q = query(
      collection(db, 'users'),
      orderBy('createdAt', 'desc'),
      limit(PAGE_SIZE)
    );
  }

  const snapshot = await getDocs(q);
  const documents = snapshot.docs.map(doc => ({
    id: doc.id,
    ...doc.data()
  }));

  // Update cursor to last document
  if (snapshot.docs.length > 0) {
    lastVisible = snapshot.docs[snapshot.docs.length - 1];
  }

  return {
    documents,
    hasMore: snapshot.docs.length === PAGE_SIZE,
    firstDoc: snapshot.docs[0] || null,
    lastDoc: lastVisible
  };
}

// Full bidirectional pagination
class FirestorePaginator {
  constructor(collectionName, orderField, pageSize = 20) {
    this.collectionRef = collection(db, collectionName);
    this.orderField = orderField;
    this.pageSize = pageSize;
    this.cursors = [];
    this.currentPage = -1;
  }

  async goToPage(pageIndex) {
    if (pageIndex < 0 || pageIndex > this.cursors.length) {
      return null;
    }

    let q;
    if (pageIndex === 0) {
      q = query(
        this.collectionRef,
        orderBy(this.orderField, 'desc'),
        limit(this.pageSize)
      );
    } else {
      const cursor = this.cursors[pageIndex - 1];
      q = query(
        this.collectionRef,
        orderBy(this.orderField, 'desc'),
        startAfter(cursor),
        limit(this.pageSize)
      );
    }

    const snapshot = await getDocs(q);
    const docs = snapshot.docs.map(d => ({
      id: d.id,
      ...d.data()
    }));

    // Store cursor for next page
    if (snapshot.docs.length > 0) {
      this.cursors[pageIndex] = snapshot.docs[snapshot.docs.length - 1];
    }

    this.currentPage = pageIndex;
    return {
      documents: docs,
      hasMore: snapshot.docs.length === this.pageSize,
      page: pageIndex,
      totalPages: this.cursors.length
    };
  }
}

# Python Firestore cursor pagination
from google.cloud import firestore

db = firestore.Client()

class CursorPaginator:
    def __init__(self, collection, page_size=20):
        self.collection = db.collection(collection)
        self.page_size = page_size
        self.last_doc = None

    def get_page(self, last_doc_id=None):
        query = (
            self.collection
            .order_by('createdAt', direction=firestore.Query.DESCENDING)
            .limit(self.page_size)
        )

        if last_doc_id:
            last_doc = self.collection.document(last_doc_id).get()
            if last_doc.exists:
                query = query.start_after(last_doc)

        docs = list(query.stream())
        return {
            'documents': [d.to_dict() for d in docs],
            'has_more': len(docs) == self.page_size,
            'last_id': docs[-1].id if docs else None
        }