Firestore - React JS realtime listener of a collection

Question

Dears, Please advise on how can I save the output from Firestore's request (PLEASE READ THE COMMENTS IN THE CODE BELOW):

const firestore = firebase.firestore();
export const fetchedTickets = []; //I want to store the fetched tickets from a collection "tickets" and use it somewhere else

//Starting to listen changes in Tickets collection
const unsubscriberForTicketsListener = firestore
  .collection("tickets")
  .onSnapshot((snapshot) => {
    snapshot.docChanges().forEach((change) => {
      if (change.type === "added") {
        // console.log("Added Ticket: ", change.doc.data());
        fetchedTickets.push(change.doc.data());
      }
      if (change.type === "modified") {
        console.log("Edited Ticket: ", change.doc.data());
      }
      if (change.type === "removed") {
        console.log("Remvoed Ticket: ", change.doc.data());
      }
    });

    console.log(fetchedTickets) //From here, I can reach the fetched tickets, but I can't return this array, or do something valuable with it (store, for example)
  });

console.log(fetchedTickets) //Here, fetchedTickets is just an empty array, so I can't return it's value to use it in a different file, for example

This is the expected behavior. Since data is loaded from Firestore asynchronously, all code that needs the data needs to be inside the callback (like your first `console.log(fetchedTickets)`) is. While code outside the callback can access the same variables, it typically runs before the data is loaded - unless you yourself ensure it runs at the right time (by using promises or something like RxJS). — Frank van Puffelen, Jul 29 '21 at 16:35
I'm not the downvoter, but you might want to keep in mind that text typed in ALL CAPS is typically perceived as yelling. — Frank van Puffelen, Jul 29 '21 at 16:39

score 0 · Accepted Answer · answered Jul 29 '21 at 16:36

0

This is the expected behavior. Since data is loaded from Firestore asynchronously, all code that needs the data needs to be inside the callback (like your first console.log(fetchedTickets)) is.

While code outside the callback can access the same variables, it typically runs before the data is loaded - unless you yourself ensure it runs at the right time (by using promises or something like RxJS).

Also see:

And more from this search.

answered Jul 29 '21 at 16:36

Frank van Puffelen

565,676
79
828
807

Thanks Frank. Yes, I do understand that, but my question is - How can I take the fetched data out of this listener's funciton – Pavel Jul 29 '21 at 17:05
As explained in my answer and the ones linked: this is not about accessing it in a certain scope, but about **when** you access it. By the time your second `console.log(fetchedTickets)` runs, the data hasn't been loaded yet. The way to make it wait is with a promise, but at that point you might as well use `get()` instead of `onSnapshot`. – Frank van Puffelen Jul 29 '21 at 17:15
Yeah, but get() will return the data once, and I want to put a listener so I can handle all the changes in the firestore in the real time – Pavel Jul 29 '21 at 17:21
That's perfectly what `onSnapshot` is for. But that does mean all code that uses the data must be inside the `onSnapshot` callback, as otherwise it won't run at the right time. – Frank van Puffelen Jul 29 '21 at 17:53

Firestore - React JS realtime listener of a collection

1 Answers1