How to Filter Documents by Array Contains in Firestore

1import { getFirestore, collection, query, where, getDocs } from 'firebase/firestore';
2
3const db = getFirestore();
4
5// Find all articles tagged with 'firebase'
6async function getArticlesByTag(tag: string) {
7  const q = query(
8    collection(db, 'articles'),
9    where('tags', 'array-contains', tag)
10  );
11
12  const snapshot = await getDocs(q);
13  return snapshot.docs.map((doc) => ({
14    id: doc.id,
15    ...doc.data()
16  }));
17}
18
19// Example: all articles with the 'firebase' tag
20const articles = await getArticlesByTag('firebase');

1import { getFirestore, collection, query, where, getDocs } from 'firebase/firestore';
2
3const db = getFirestore();
4
5// Find articles tagged with ANY of these topics
6async function getArticlesByAnyTag(tags: string[]) {
7  const q = query(
8    collection(db, 'articles'),
9    where('tags', 'array-contains-any', tags)
10  );
11
12  const snapshot = await getDocs(q);
13  return snapshot.docs.map((doc) => ({
14    id: doc.id,
15    ...doc.data()
16  }));
17}
18
19// Returns articles tagged with 'firebase' OR 'react' OR 'typescript'
20const articles = await getArticlesByAnyTag(['firebase', 'react', 'typescript']);

1import { getFirestore, collection, query, where, orderBy, limit, getDocs } from 'firebase/firestore';
2
3const db = getFirestore();
4
5// Find published articles with the 'firebase' tag, ordered by date
6async function getPublishedArticlesByTag(tag: string) {
7  const q = query(
8    collection(db, 'articles'),
9    where('tags', 'array-contains', tag),
10    where('status', '==', 'published'),
11    orderBy('publishedAt', 'desc'),
12    limit(20)
13  );
14
15  const snapshot = await getDocs(q);
16  return snapshot.docs.map((doc) => ({
17    id: doc.id,
18    ...doc.data()
19  }));
20}

1// These will NOT work:
2
3// ERROR: Cannot have two array-contains in one query
4const bad1 = query(
5  collection(db, 'articles'),
6  where('tags', 'array-contains', 'firebase'),
7  where('tags', 'array-contains', 'react')
8);
9
10// ERROR: Cannot combine array-contains-any with in
11const bad2 = query(
12  collection(db, 'articles'),
13  where('tags', 'array-contains-any', ['firebase', 'react']),
14  where('status', 'in', ['published', 'draft'])
15);
16
17// WORKAROUND for AND logic: use a map field instead
18// Store { firebase: true, react: true } and query with:
19const workaround = query(
20  collection(db, 'articles'),
21  where('tagMap.firebase', '==', true),
22  where('tagMap.react', '==', true)
23);

1import { getFirestore, collection, query, where, onSnapshot } from 'firebase/firestore';
2
3const db = getFirestore();
4
5function listenToTaggedArticles(tag: string, callback: (articles: any[]) => void) {
6  const q = query(
7    collection(db, 'articles'),
8    where('tags', 'array-contains', tag)
9  );
10
11  const unsubscribe = onSnapshot(q, (snapshot) => {
12    const articles = snapshot.docs.map((doc) => ({
13      id: doc.id,
14      ...doc.data()
15    }));
16    callback(articles);
17  });
18
19  return unsubscribe;
20}
21
22// Start listening
23const unsub = listenToTaggedArticles('firebase', (articles) => {
24  console.log('Updated articles:', articles.length);
25});
26
27// Call unsub() to stop listening