Firebase Version 9 Tutorial (Modular)
Firebase 9 Firestore WHERE Query Explained [2023]
Learn how to make a where query to Firestore Database using JavaScript.
The where clause is used to filter data in the query based on one or more specific conditions.
I assume that you’ve already created a Firebase project and initialized Firebase SDK via NPM or CDN to your project.
If not, make sure to do those before going further.
- Get A Reference To The Firestore Collection
- Build A Query Using The Where Clause
- Run The Query Using getDocs()
- Query With Multiple Where Clauses
1. Get A Reference To The Firestore Collection
The first step is to import the Firebase Firestore module and destructure the getFirestore and collection methods.
I’ve included both NPM and CDN import statements, feel free to use either of your choice.
// Use either NPM or CDN
import { getFirestore, collection } from "firebase/firestore"; // NPM
import { getFirestore, collection } from "https://www.gstatic.com/firebasejs/9.23.0/firebase-firestore.js"; // CDN
const db = getFirestore();
const collectionRef = collection(db, "Audience");Then, create an instance of the Firestore Database and assign it to a constant db.
After that, get a reference of the audience collection using the collection method passing database reference and collection name as arguments.
2. Build A Query Using The Where Clause
The second step is to destructure the query and where methods from the Firestore module.
import { getFirestore, collection, query, where } from "firebase/firestore";
const db = getFirestore();
const collectionRef = collection(db, "Audience");
const q = query(collectionRef, where("country", "==", "USA"));Invoke the query() method with the collection reference object as a first argument and the where() method as a second argument.
The where() method takes three arguments:
1. The first argument is the field name that you want to filter data from…in this case country
2. The second argument is the comparison operator string which is “==”… in this case
These are the other comparison string operators you can use as a second argument inside the where() method:
'==': Equal to'<': Less than'>': Greater than'<=': Less than or equal to'>=': Greater than or equal to'array-contains': Array contains a specific element'in': Field value is in a given array'array-contains-any': Array contains any element from a given array
3. The third argument is the actual value of the category field that you want to compare to…in this case, the comparison value “USA” which is a string type.
The value can also be number, boolean, object like data etc.
Finally, the query() with the where clause will return the query object and assign it to the constant q.
3. Run The Query Using getDocs()
The third step is to make a query to the Firestore Database using the getDocs() method with an argument of the query object.
Destructure the getDocs method() from the Firestore module.
import { getFirestore, collection, query, where, getDocs }
from "firebase/firestore";
const db = getFirestore();
const collectionRef = collection(db, "Audience");
const q = query(collectionRef, where("country", "==", "USA"));
const docSnap = await getDocs(q);
docSnap.forEach((doc) => {
console.log(doc.data());
});
4. Query With Multiple Where Clauses
In this example, I not only filter the data based on the audience who live in the USA but also filter those who are 18 or older.
import { getFirestore, collection, query, where, getDocs }
from "firebase/firestore";
const db = getFirestore();
const collectionRef = collection(db, "Audience");
const q = query(collectionRef,
where("country", "==", "USA"),
where("age", ">=", 18),
);
const docSnap = await getDocs(q);
docSnap.forEach((doc) => {
console.log(doc.data());
});