Counting a collection's documents with Firebase Firestore

In this article, we learn how to count the number of documents in a Firestore collection using a custom React.js hook.

·2 min read
Cover Image for Counting a collection's documents with Firebase Firestore

During the 2022 Firebase Submit, the Firebase team released a huge new feature for Firestore: count aggregations.

Thanks to count aggregations, we can query the total number of documents in a Firestore collection.

To do so, we are going to use the function getCountFromServer: this function accepts a Firestore query and will return the number of documents found according to the query.

A Custom React hook to fetch the documents count from Firestore

In the example, below, we use React.js and Firebase to fetch the number of documents contained in our Firestore collection tasks:

import { useCallback } from 'react'; import { useFirestore } from 'reactfire'; import { where, getCountFromServer, query, collection, CollectionReference, } from 'firebase/firestore'; import { Task } from '~/lib/tasks/types/task'; const tasksCollection = 'tasks'; const path = `organizationId`; const operator = '=='; function useFetchTasksCount() { const firestore = useFirestore(); return useCallback( (organizationId: string) => { const constraints = [ where(path, operator, organizationId) ]; const collectionRef = collection( firestore, tasksCollection ) as CollectionReference<WithId<Task>>; return getCountFromServer( query(collectionRef, ...constraints) ); }, [firestore] ); } export default useFetchTasksCount;

Now that we have a React hook that returns a function to fetch the number of documents from the collection, we can use this custom hook in one of our components and render the result:

function TasksCollectionCount( props: React.PropsWithChildren<{ organizationId: string }>) { const fetchTaskCount = useFetchTasksCount(); const [tasksCount, setTasksCount] = useState<number>(); useEffect(() => { // when the component mounts, we store the tasks count in the state fetchTaskCount(props.organizationId).then((result) => { setTasksCount(result.data().count); }); }, [fetchTaskCount, props.organizationId]); if (tasksCount === undefined) { return <p>Loading count...</p>; } return <div>Tasks ({ tasksCount })</div>; }

Great, we can now display how many tasks are in our tasks collection for the organization.

Billing for Firestore Count Aggregations

When you query aggregated data using the count aggregations, every 1000 documents counted will count as 1 document read.



Read more about Tutorials

Cover Image for Building an AI Writer SaaS with Next.js and Supabase

Building an AI Writer SaaS with Next.js and Supabase

·57 min read
Learn how to build an AI Writer SaaS with Next.js and Supabase - from writing SEO optimized blog posts to managing subscriptions and billing.
Cover Image for Announcing the Data Loader SDK for Supabase

Announcing the Data Loader SDK for Supabase

·8 min read
We're excited to announce the Data Loader SDK for Supabase. It's a declarative, type-safe set of utilities to load data into your Supabase database that you can use in your Next.js or Remix apps.
Cover Image for Adding AI capabilities to your Next.js SaaS with Supabase and HuggingFace

Adding AI capabilities to your Next.js SaaS with Supabase and HuggingFace

·20 min read
In this tutorial, we will learn how to use add AI capabilities to your SaaS using Supabase Vector, HuggingFace models and Next.js Server Components.
Cover Image for Building an AI-powered Blog with Next.js and WordPress

Building an AI-powered Blog with Next.js and WordPress

·17 min read
Learn how to build a blog with Next.js 13 and WordPress and how to leverage AI to generate content.
Cover Image for Using Supabase Vault to store secrets

Using Supabase Vault to store secrets

·6 min read
Supabase Vault is a Postgres extension that allows you to store secrets in your database. This is a great way to store API keys, tokens, and other sensitive information. In this tutorial, we'll use Supabase Vault to store our API keys
Cover Image for Introduction to Next.js Server Actions

Introduction to Next.js Server Actions

·9 min read
Next.js Server Actions are a new feature introduced in Next.js 13 that allows you to run server code without having to create an API endpoint. In this article, we'll learn how to use them.