rxfire

import { initializeApp } from 'firebase/app'; import { getFirestore, collection, where, query } from 'firebase/firestore'; import { collectionData } from 'rxfire/firestore'; import { tap } from 'rxjs/operators'; // Replace with your actual Firebase configuration from the Firebase console. // Using process.env for security in a real application. const firebaseConfig = { apiKey: process.env.FIREBASE_API_KEY ?? 'YOUR_API_KEY', authDomain: process.env.FIREBASE_AUTH_DOMAIN ?? 'your-project-id.firebaseapp.com', projectId: process.env.FIREBASE_PROJECT_ID ?? 'your-project-id', storageBucket: process.env.FIREBASE_STORAGE_BUCKET ?? 'your-project-id.appspot.com', messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID ?? '1234567890', appId: process.env.FIREBASE_APP_ID ?? '1:1234567890:web:abcdef1234567890' }; const app = initializeApp(firebaseConfig); const firestore = getFirestore(app); // Create a query reference to a 'cities' collection, filtering by 'state' == 'CO' const citiesRef = query( collection(firestore, 'cities'), where('state', '==', 'CO') ); console.log('Subscribing to real-time city data from Firestore...'); // Use collectionData from RxFire to get an observable of the query snapshot data collectionData(citiesRef, { idField: 'id' }) .pipe( tap(cities => console.log(`Received update with ${cities.length} cities.`)) ) .subscribe({ next: cities => { // This callback will fire initially and then on every subsequent change console.log('Current cities from Colorado:', cities); // In a real application, you would update your UI here. }, error: err => console.error('Error fetching cities:', err), complete: () => console.log('Observable completed (unlikely for real-time data).') }); // To demonstrate unsubscribe, in a real app you might do this on component unmount // const subscription = collectionData(...).subscribe(...); // setTimeout(() => subscription.unsubscribe(), 30000);