Real-time listeners (onSnapshot) in Firebase - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to listen for real-time updates on a Firestore document.

Firebase

const unsubscribe = docRef.[1](doc => {
  console.log("Current data:", doc.data());
});

Drag options to blanks, or click blank then click option'

Aset

Bget

ConSnapshot

Dupdate

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'get' fetches data only once, not real-time updates.

The onSnapshot method sets up a real-time listener that triggers whenever the document changes.

2fill in blank

medium

Complete the code to listen for real-time updates on a Firestore collection.

Firebase

const unsubscribe = collectionRef.[1](snapshot => {
  snapshot.docs.forEach(doc => {
    console.log(doc.id, doc.data());
  });
});

Drag options to blanks, or click blank then click option'

Aget

BonSnapshot

Cadd

Ddelete

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'get' only fetches data once, not real-time updates.

onSnapshot listens to changes in the collection and provides a snapshot of documents.

3fill in blank

hard

Fix the error in the code to correctly unsubscribe from the listener.

Firebase

const unsubscribe = docRef.onSnapshot(doc => {
  console.log(doc.data());
});

// Later in code
[1]();

Drag options to blanks, or click blank then click option'

Aunsubscribe

BdocRef.unsubscribe

CdocRef.onSnapshot

Dunsubscribe()

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to call unsubscribe as a method on docRef instead of the returned function.

The unsubscribe variable holds the function to stop listening. Calling unsubscribe() stops the listener.

4fill in blank

hard

Fill both blanks to correctly handle errors in a real-time listener.

Firebase

const unsubscribe = docRef.onSnapshot([1], [2]);

Drag options to blanks, or click blank then click option'

Adoc => console.log(doc.data())

Berror => console.error(error)

Cdoc => console.error(doc.data())

Derror => console.log(error)

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping the error and data callbacks or logging errors as data.

The first argument is the callback for data updates, the second handles errors.

5fill in blank

hard

Fill all three blanks to set up a real-time listener with options to include metadata changes.

Firebase

const unsubscribe = collectionRef.onSnapshot([1], [2], [3]);

Drag options to blanks, or click blank then click option'

Asnapshot => console.log(snapshot.docs.length)

Berror => console.error(error)

C{ includeMetadataChanges: true }

D{ includeMetadataChanges: false }

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting the options object or setting includeMetadataChanges to false when true is needed.

The first callback handles data, the second handles errors, and the third is options to include metadata changes.