Querying with where clause in Firebase - Mini Project: Build & Apply

Querying with where clause

📖 Scenario: You are managing a small online bookstore database using Firebase Firestore. You want to find books that belong to a specific genre to display them on your website.

🎯 Goal: Build a Firebase Firestore query that retrieves all books where the genre is exactly 'Science Fiction'.

📋 What You'll Learn

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

Create a query called scienceFictionBooksQuery that uses where to filter books with genre 'Science Fiction'

Use the getDocs function to fetch the query results

Store the fetched documents in a variable called scienceFictionBooks

💡 Why This Matters

🌍 Real World

Filtering data in a Firestore database is common for apps that need to show specific subsets of data, like books of a certain genre.

💼 Career

Understanding Firestore queries with where clauses is essential for frontend and backend developers working with Firebase to build responsive and dynamic applications.

1

Set up the Firestore collection reference

Create a constant called booksRef that references the 'books' collection using collection(db, 'books').

Firebase

import { collection, query, where, getDocs } from 'firebase/firestore';
import { db } from './firebaseConfig';

// Create booksRef collection reference
// Your code here

Need a hint?

Use the collection function with db and the string 'books' to create booksRef.

2

Create a query with a where clause

Create a constant called scienceFictionBooksQuery that uses query(booksRef, where('genre', '==', 'Science Fiction')) to filter books by genre.

Firebase

import { collection, query, where, getDocs } from 'firebase/firestore';
import { db } from './firebaseConfig';

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

// Create scienceFictionBooksQuery with where clause
// Your code here

Need a hint?

Use the query function with booksRef and a where clause to filter by genre.

3

Fetch the query results

Create an asynchronous function called fetchScienceFictionBooks that uses getDocs(scienceFictionBooksQuery) to get the documents and stores them in a constant called querySnapshot.

Firebase

import { collection, query, where, getDocs } from 'firebase/firestore';
import { db } from './firebaseConfig';

const booksRef = collection(db, 'books');
const scienceFictionBooksQuery = query(booksRef, where('genre', '==', 'Science Fiction'));

// Create async function fetchScienceFictionBooks
// Your code here

Need a hint?

Define an async function and use await getDocs(scienceFictionBooksQuery) to fetch data.

4

Store the fetched documents

Inside fetchScienceFictionBooks, create a constant called scienceFictionBooks that maps querySnapshot.docs to an array of book data using doc.data().

Firebase

import { collection, query, where, getDocs } from 'firebase/firestore';
import { db } from './firebaseConfig';

const booksRef = collection(db, 'books');
const scienceFictionBooksQuery = query(booksRef, where('genre', '==', 'Science Fiction'));

async function fetchScienceFictionBooks() {
    const querySnapshot = await getDocs(scienceFictionBooksQuery);
    // Map docs to scienceFictionBooks array
    // Your code here
}

Need a hint?

Use querySnapshot.docs.map(doc => doc.data()) to extract book data.