How to Paginate Firestore Results

1import { collection, query, orderBy, limit, getDocs } from 'firebase/firestore'
2
3const PAGE_SIZE = 10
4
5async function fetchFirstPage() {
6  const q = query(
7    collection(db, 'products'),
8    orderBy('createdAt', 'desc'),
9    limit(PAGE_SIZE)
10  )
11
12  const snapshot = await getDocs(q)
13  const docs = snapshot.docs.map((doc) => ({ id: doc.id, ...doc.data() }))
14
15  // Store the last document as cursor for next page
16  const lastDoc = snapshot.docs[snapshot.docs.length - 1]
17  const hasMore = snapshot.docs.length === PAGE_SIZE
18
19  return { docs, lastDoc, hasMore }
20}

1import { startAfter } from 'firebase/firestore'
2
3async function fetchNextPage(lastDoc: any) {
4  const q = query(
5    collection(db, 'products'),
6    orderBy('createdAt', 'desc'),
7    startAfter(lastDoc),
8    limit(PAGE_SIZE)
9  )
10
11  const snapshot = await getDocs(q)
12  const docs = snapshot.docs.map((doc) => ({ id: doc.id, ...doc.data() }))
13
14  const newLastDoc = snapshot.docs[snapshot.docs.length - 1]
15  const hasMore = snapshot.docs.length === PAGE_SIZE
16
17  return { docs, lastDoc: newLastDoc, hasMore }
18}
19
20// Usage:
21// const page1 = await fetchFirstPage()
22// const page2 = await fetchNextPage(page1.lastDoc)
23// const page3 = await fetchNextPage(page2.lastDoc)

1import { endBefore, limitToLast } from 'firebase/firestore'
2
3async function fetchPreviousPage(firstDoc: any) {
4  const q = query(
5    collection(db, 'products'),
6    orderBy('createdAt', 'desc'),
7    endBefore(firstDoc),
8    limitToLast(PAGE_SIZE)
9  )
10
11  const snapshot = await getDocs(q)
12  const docs = snapshot.docs.map((doc) => ({ id: doc.id, ...doc.data() }))
13
14  return {
15    docs,
16    firstDoc: snapshot.docs[0],
17    lastDoc: snapshot.docs[snapshot.docs.length - 1],
18  }
19}

1import { where } from 'firebase/firestore'
2
3async function fetchFilteredPage(category: string, lastDoc?: any) {
4  const constraints: any[] = [
5    where('category', '==', category),
6    orderBy('price', 'asc'),
7    limit(PAGE_SIZE),
8  ]
9
10  if (lastDoc) {
11    constraints.push(startAfter(lastDoc))
12  }
13
14  const q = query(collection(db, 'products'), ...constraints)
15  const snapshot = await getDocs(q)
16
17  return {
18    docs: snapshot.docs.map((d) => ({ id: d.id, ...d.data() })),
19    lastDoc: snapshot.docs[snapshot.docs.length - 1] ?? null,
20    hasMore: snapshot.docs.length === PAGE_SIZE,
21  }
22}
23
24// Page through electronics sorted by price
25// const p1 = await fetchFilteredPage('electronics')
26// const p2 = await fetchFilteredPage('electronics', p1.lastDoc)

1import { useState, useCallback } from 'react'
2import { getDocs, query, limit, startAfter, QueryConstraint, Query } from 'firebase/firestore'
3
4export function useFirestorePagination(
5  baseQuery: Query,
6  pageSize: number = 10
7) {
8  const [pages, setPages] = useState<any[][]>([])
9  const [cursors, setCursors] = useState<any[]>([])
10  const [loading, setLoading] = useState(false)
11  const [hasMore, setHasMore] = useState(true)
12  const [pageIndex, setPageIndex] = useState(-1)
13
14  const fetchPage = useCallback(async (cursor?: any) => {
15    setLoading(true)
16    const constraints: QueryConstraint[] = [limit(pageSize)]
17    if (cursor) constraints.push(startAfter(cursor))
18
19    const q = query(baseQuery, ...constraints)
20    const snapshot = await getDocs(q)
21    const docs = snapshot.docs.map((d) => ({ id: d.id, ...d.data() }))
22    const lastDoc = snapshot.docs[snapshot.docs.length - 1]
23
24    setHasMore(snapshot.docs.length === pageSize)
25    setLoading(false)
26    return { docs, lastDoc }
27  }, [baseQuery, pageSize])
28
29  const nextPage = useCallback(async () => {
30    const cursor = cursors[cursors.length - 1] ?? undefined
31    const { docs, lastDoc } = await fetchPage(cursor)
32    setPages((p) => [...p, docs])
33    setCursors((c) => [...c, lastDoc])
34    setPageIndex((i) => i + 1)
35  }, [fetchPage, cursors])
36
37  const prevPage = useCallback(() => {
38    if (pageIndex <= 0) return
39    setPageIndex((i) => i - 1)
40    setHasMore(true)
41  }, [pageIndex])
42
43  return {
44    data: pages[pageIndex] ?? [],
45    loading,
46    hasMore,
47    hasPrev: pageIndex > 0,
48    nextPage,
49    prevPage,
50    page: pageIndex + 1,
51  }
52}