Real-time updates with listeners in GCP - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to initialize a Firestore listener for real-time updates.

GCP

db.collection('users').[1](snapshot => {
  snapshot.docChanges().forEach(change => {
    if (change.type === 'added') {
      console.log('New user: ', change.doc.data());
    }
  });
});

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

AaddListener

Bget

Clisten

DonSnapshot

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'get' which fetches data once instead of listening.

Using 'addListener' which is not a Firestore method.

The onSnapshot method sets up a real-time listener to Firestore collection changes.

2fill in blank

medium

Complete the code to stop the Firestore listener when no longer needed.

GCP

const unsubscribe = db.collection('messages').onSnapshot(snapshot => {
  // handle updates
});

// Later in code
[1]();

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

Astop

Bclose

Cunsubscribe

DremoveListener

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to call 'stop' or 'close' which are not Firestore listener methods.

Using 'removeListener' which is not valid here.

The unsubscribe function returned by onSnapshot stops the listener.

3fill in blank

hard

Fix the error in the listener callback to correctly handle added documents.

GCP

db.collection('orders').onSnapshot(snapshot => {
  snapshot.docChanges().forEach(change => {
    if (change.type === [1]) {
      console.log('Order added:', change.doc.data());
    }
  });
});

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

A'added'

Badded

C'add'

D'new'

Attempts:

3 left

💡 Hint

Common Mistakes

Using the word without quotes causing a reference error.

Using incorrect strings like 'add' or 'new'.

The change.type is a string and must be compared to the string 'added'.

4fill in blank

hard

Fill both blanks to filter Firestore documents and listen for real-time updates.

GCP

db.collection('tasks').where('status', [1], 'completed').[2](snapshot => {
  snapshot.forEach(doc => {
    console.log(doc.id, '=>', doc.data());
  });
});

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

A'=='

B'!='

C'<='

DonSnapshot

Attempts:

3 left

💡 Hint

Common Mistakes

Using '!=' which filters out 'completed' instead of selecting it.

Using 'get' instead of 'onSnapshot' which does not listen for updates.

The where clause uses '==' to filter documents where status equals 'completed'. The onSnapshot method listens for real-time updates.

5fill in blank

hard

Fill all three blanks to set up a listener that logs only modified documents with priority above 5.

GCP

db.collection('alerts').where('priority', [1], 5).[2](snapshot => {
  snapshot.docChanges().forEach(change => {
    if (change.type === [3]) {
      console.log('Modified alert:', change.doc.data());
    }
  });
});

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

A'>'

BonSnapshot

C'modified'

D'<'

Attempts:

3 left

💡 Hint

Common Mistakes

Using '<' instead of '>' which filters the wrong documents.

Comparing change.type to 'added' or 'removed' instead of 'modified'.

The where clause uses '>' to filter priorities above 5. The onSnapshot method listens for real-time updates. The change.type is compared to the string 'modified' to detect modified documents.