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

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

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

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
}

Hint

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

Practice

1. What does the where clause do in a Firebase query?

easy

A. Filters documents based on a condition

B. Deletes documents from a collection

C. Adds new documents to a collection

D. Sorts documents alphabetically

Solution

1. Step 1: Understand the purpose of where clause

   The where clause is used to filter documents in a collection based on a condition.

2. Step 2: Compare with other options

   Deleting, adding, or sorting documents are different operations and not done by where.

3. Final Answer:

   Filters documents based on a condition -> Option A

4. Quick Check:

   where clause = filter condition [OK]

Hint: Remember: where filters, not adds or deletes [OK]

Common Mistakes:

• Confusing filtering with deleting data
• Thinking where adds new documents
• Assuming where sorts data

2. Which of the following is the correct syntax to query documents where the field age is equal to 25 in Firebase?

easy

A. db.collection('users').filter('age', '==', 25)

B. db.collection('users').where('age' = 25)

C. db.collection('users').where('age', '=', 25)

D. db.collection('users').where('age', '==', 25)

Solution

1. Step 1: Recall Firebase where clause syntax

   The correct syntax uses where(field, operator, value) with operator as a string, e.g., '=='.

2. Step 2: Check each option

   db.collection('users').where('age', '==', 25) matches correct syntax. db.collection('users').where('age' = 25) uses '=' instead of '=='. db.collection('users').filter('age', '==', 25) uses 'filter' which is incorrect. db.collection('users').where('age', '=', 25) uses '=' instead of '=='.

3. Final Answer:

   db.collection('users').where('age', '==', 25) -> Option D

4. Quick Check:

   where(field, '==', value) syntax [OK]

Hint: Use '==' operator as a string in where clause [OK]

Common Mistakes:

• Using '=' instead of '==' in where clause
• Using filter() instead of where()
• Missing quotes around operator

3. Given the following Firebase query:

db.collection('products').where('price', '>=', 100).get()

Which products will be returned?

medium

A. Products with price less than 100

B. Products with price equal to 100 only

C. Products with price greater than or equal to 100

D. All products regardless of price

Solution

1. Step 1: Understand the operator '>=' in where clause

   The operator '>=' means greater than or equal to the given value.

2. Step 2: Apply the condition to the query

   The query returns products where price is 100 or more.

3. Final Answer:

   Products with price greater than or equal to 100 -> Option C

4. Quick Check:

   price >= 100 means price ≥ 100 [OK]

Hint: '>=' means greater or equal, so include 100 and above [OK]

Common Mistakes:

• Thinking '>=' means only greater than
• Confusing '<' with '>='
• Assuming it returns all products

4. What is wrong with this Firebase query?

db.collection('orders').where('status', 'equals', 'shipped').get()

medium

A. The operator 'equals' is invalid in where clause

B. The collection name 'orders' is incorrect

C. The field 'status' cannot be queried

D. The get() method is missing parentheses

Solution

1. Step 1: Check the operator used in where clause

   Firebase supports operators like '==', '<', '>=', but not 'equals'.

2. Step 2: Verify other parts of the query

   Collection name and field are valid, and get() is correctly called with parentheses.

3. Final Answer:

   The operator 'equals' is invalid in where clause -> Option A

4. Quick Check:

   Use '==' not 'equals' in where clause [OK]

Hint: Use '==' operator, not words like 'equals' [OK]

Common Mistakes:

• Using 'equals' instead of '=='
• Missing parentheses on get()
• Assuming any string operator works

5. You want to get all users from the 'users' collection whose age is between 18 and 30 inclusive. Which Firebase query correctly achieves this?

hard

A. db.collection('users').where('age', '>', 18).where('age', '<', 30)

B. db.collection('users').where('age', '>=', 18).where('age', '<=', 30)

C. db.collection('users').where('age', '==', 18).where('age', '==', 30)

D. db.collection('users').where('age', '>=', 18 || '<=', 30)

Solution

1. Step 1: Understand how to filter a range in Firebase

   Firebase allows chaining multiple where clauses to filter a range, e.g., age >= 18 and age <= 30.

2. Step 2: Analyze each option

   db.collection('users').where('age', '>=', 18).where('age', '<=', 30) correctly uses two where clauses with '>=' and '<=' operators. db.collection('users').where('age', '>', 18).where('age', '<', 30) excludes 18 and 30 by using '>' and '<'. db.collection('users').where('age', '==', 18).where('age', '==', 30) tries to match age exactly 18 and 30 simultaneously, which is impossible. db.collection('users').where('age', '>=', 18 || '<=', 30) uses invalid syntax combining operators in one where.

3. Final Answer:

   db.collection('users').where('age', '>=', 18).where('age', '<=', 30) -> Option B

4. Quick Check:

   Chain where with >= and <= for inclusive range [OK]

Hint: Chain where clauses for range with >= and <= [OK]

Common Mistakes:

• Using '==' twice for range
• Combining operators incorrectly in one where
• Using > and < excludes boundary values