Limit and pagination in Firebase - Mini Project: Build & Apply

Limit and Pagination with Firebase

📖 Scenario: You are building a simple app that shows a list of books stored in Firebase Firestore. To improve user experience, you want to show only a few books at a time and let users load more books page by page.

🎯 Goal: Build a Firebase Firestore query that fetches books with a limit of 3 per page and supports pagination to load the next set of books.

📋 What You'll Learn

Create a Firestore collection reference called booksRef pointing to the 'books' collection

Create a query called firstPageQuery that limits results to 3 books

Create a variable called lastVisible to store the last document from the first page

Create a query called nextPageQuery that starts after lastVisible and limits results to 3 books

💡 Why This Matters

🌍 Real World

Pagination is essential in apps that show large lists of data, like books, products, or messages, to improve performance and user experience.

💼 Career

Understanding Firestore pagination is important for cloud developers building scalable and user-friendly applications.

1

Create Firestore collection reference

Create a Firestore collection reference called booksRef that points to the 'books' collection using collection(db, 'books').

Firebase

import { getFirestore, collection, query, limit, startAfter, getDocs } from 'firebase/firestore';

const db = getFirestore();

// Create booksRef collection reference
// Your code here

Need a hint?

Use the collection function with db and the string 'books'.

2

Create a query to get the first page with limit

Create a query called firstPageQuery using query() with booksRef and limit(3) to get only 3 books.

Firebase

import { getFirestore, collection, query, limit, startAfter, getDocs } from 'firebase/firestore';

const db = getFirestore();

const booksRef = collection(db, 'books');

// Create firstPageQuery with limit 3
// Your code here

Need a hint?

Use query() with booksRef and limit(3).

3

Get last visible document from first page

Create an async function called loadFirstPage that gets documents from firstPageQuery using getDocs(). Inside it, create a variable called lastVisible that stores the last document from the query snapshot using docs[docs.length - 1].

Firebase

import { getFirestore, collection, query, limit, startAfter, getDocs } from 'firebase/firestore';

const db = getFirestore();

const booksRef = collection(db, 'books');

const firstPageQuery = query(booksRef, limit(3));

// Create async function loadFirstPage to get docs and lastVisible
// Your code here

Need a hint?

Use await getDocs(firstPageQuery) and get the last document from documentSnapshots.docs.

4

Create query for next page using startAfter

Inside the loadFirstPage function, create a query called nextPageQuery using query() with booksRef, startAfter(lastVisible), and limit(3) to get the next 3 books after the last visible document.

Firebase

import { getFirestore, collection, query, limit, startAfter, getDocs } from 'firebase/firestore';

const db = getFirestore();

const booksRef = collection(db, 'books');

const firstPageQuery = query(booksRef, limit(3));

async function loadFirstPage() {
    const documentSnapshots = await getDocs(firstPageQuery);
    const lastVisible = documentSnapshots.docs[documentSnapshots.docs.length - 1];
    
    // Create nextPageQuery starting after lastVisible with limit 3
    // Your code here
}

Need a hint?

Use query(booksRef, startAfter(lastVisible), limit(3)) inside the function.