Reading a list of Documents

Learn how to read a list of documents from Firebase using both the Web SDK and the Admin SDK in your Next.js Firebase application

Reading a List of Documents with the Client SDK

The client SDK uses Reactfire to make it easier to fetch data directly from React components using React Hooks.

Reading a List of Documents with "useFirestoreCollectionData"

In the example below, we will fetch a list of user organizations using the Firebase client SDK and Reactfire.

To do so, we use the React hook useFirestoreCollectionData, which allows us to stream real-time changes from a collection based on the filters provided.

import { collection, where, query, CollectionReference, } from 'firebase/firestore'; import { useFirestore, useFirestoreCollectionData } from 'reactfire'; import { Organization } from '~/lib/organizations/types/organization'; import { ORGANIZATIONS_COLLECTION } from '~/lib/firestore-collections'; export function useFetchUserOrganizations(userId: string) { const firestore = useFirestore(); const organizationsCollection = collection( firestore, ORGANIZATIONS_COLLECTION ) as CollectionReference<WithId<Organization>>; const userPath = `members.${userId}`; const operator = '!='; // we query Firestore for all the organizations // where the user is a member, therefore where he path // members.<user_id> is not null const constraint = where(userPath, operator, null); const organizationsQuery = query(organizationsCollection, constraint); return useFirestoreCollectionData(organizationsQuery, { idField: `id`, initialData: [], }); }

Breaking down the code above:

  • We first import the useFirestoreCollectionData hook from reactfire and the collection, where and query functions from firebase/firestore.
  • We then use the useFirestore hook to get access to the Firestore instance.
  • We then create a reference to the organizations collection.
  • We then create a query to fetch all the organizations where the user is a member.
  • Finally, we use the useFirestoreCollectionData hook to fetch the data from Firestore.

Using the Data

The useFirestoreCollectionData hook returns an object with the following properties:

  • data: the data returned from Firestore
  • status: the status of the request
function UserOrganizations({ userId, }: React.PropsWithChildren<{ userId: string; }>) { const { data, status } = useFetchUserOrganizations(userId); if (status === 'loading') { return <p>Loading...</p>; } if (status === 'error') { return <p>Error</p>; } return ( <ul> { => ( <li key={}>{}</li> ))} </ul> ); }

Using the Admin SDK

The Admin SDK is used to read data from the server-side.

Reading a List of Documents with "getDocs"

In the example below, we will fetch a list of user organizations using the Firebase Admin SDK.

import getRestFirestore from '~/core/firebase/admin/get-rest-firestore'; export async function getOrganizationsForUser(userId: string) { const firestore = getRestFirestore(); const organizationsCollection = firestore.collection('organizations'); const result = await organizationsCollection .where(`members.${userId}`, '!=', null) .get(); return => { return {, members: [], id:, role:[userId].role, }; }); }

You can use the function above in an API route or in a getServerSideProps function.

To learn more about the above, check out both the Firebase and Reactfire respective documentations.

Subscribe to our Newsletter
Get the latest updates about React, Remix, Next.js, Firebase, Supabase and Tailwind CSS