1

I am having trouble subscribing to changes in Firebase's Firestore. I am developing my first React Native project with Firebase, therefore i am not really familiar with Firebase.

The Firebase connection is working: I can add and read data from the Firstore.

So far I have tried to replicate this issue: React useState and Firebase onSnapshot which did not work for me.

useEffect(() => {
    const q = query(collection(db, "rooms"), where("active", "==", "true"));
    const unsubscribe = onSnapshot(q, (querySnapshot) => {
      setUser(querySnapshot);
    });
    console.log("User: " + user);
    return () => {
      unsubscribe();
    };
  }, []);

When I run it I get the following output User: undefined

I have also tried this approach:

const q = query(collection(db, "rooms"), where("active", "==", "true"));
const unsubscribe = onSnapshot(q, (querySnapshot) => {
  querySnapshot.forEach((doc) => {
    console.log(doc);
  });
});
unsubscribe();

That's not working either.

Here you can see my Firestore: Firestore

Is there anything I am missing? Your help is really appreciated!

Asaraspo
  • 73
  • 5
  • Have you checked [How to get data from firestore DB in outside of onSnapshot](https://stackoverflow.com/q/52488087/13130697) ? The `console.log()` current runs even before `onSnapshot` has fetched data. Also if you have store 'true' as a boolean value in Firestore then use `where("active", "==", true)` instead of `where("active", "==", "true")` otherwise the query is looking for active field where it's string. – Dharmaraj Apr 30 '22 at 12:56
  • If I understand it correctly, I need the function "onSnapshot" to subscribe changes. I don't want to read the data only once, but I want to get continuous changes in the firestore. – Asaraspo May 02 '22 at 07:18

2 Answers2

0

onSnapshot , setUser and other calls that manipulate state, are asynchronous, so you have to make sure you log them after the asynchronous operation has completed.

That's why your call to setUser(querySnapshot); is inside the callback, as that ensures it happens after the querySnapshot is available from the database.

If you want to see the value that you get from the database, log it inside the callback like this:

const unsubscribe = onSnapshot(q, (querySnapshot) => {
  console.log("Snapshot: " + querySnapshot.size);
  setUser(querySnapshot);
});

Similarly, if you want to show the updated state, you can pass a callback to setUser, which then is called once the state is updated:

const unsubscribe = onSnapshot(q, (querySnapshot) => {
  console.log("Snapshot: " + querySnapshot.size);
  setUser(querySnapshot, () => {
    console.log("User: " + user.size);
  });
});
Frank van Puffelen
  • 565,676
  • 79
  • 828
  • 807
  • I'm afraid I'm still having some problems understanding how the onSnapchat function is working. Do I need to call unsubscribe() afterwards, or how does this function get called? – Asaraspo May 02 '22 at 06:48
  • "still having some problems" is hard to help with. Did you apply the changes I showed and explained in my answer? What output do you see on the console with those changes? – Frank van Puffelen May 02 '22 at 14:32
  • Unfortunately, I did not get any logs in the console. Maybe I am not calling the function the right way... I have tried it with a simple call to unsubscribe() but that did not lead to any improvements. – Asaraspo May 03 '22 at 06:56
0

Make sure you have created an index on the fields that you are using in where and order by clause. You can create it by going to firebase console -> Firestore Database -> indexes.

how to add index index in firestore

Qasim Zubair
  • 177
  • 2
  • 3