CODEWITHSUNDEEP
reactjsfirebasegoogle-cloud-firestore
David Pardo
David Pardo

Reputation: 48

How to call onsnapshot firebase result from other file/module?

I would like to know if it's possible to return the value of onSnapshot from one file to another, maybe the example helps.

This is my firebase-dishes-crud.js file

    const listenRealTimeDishes =  () => {
     firebase
      .firestore()
      .collection("dishes")
      .onSnapshot((dishes) => {
        let dishesAux = [];
        dishes.forEach((dish) => {
          dishesAux.push({ id: dish.id, ...dish.data() });
        });
        return dishesAux;
      });
  };

And this is in my dishes-list.js file.

  const [dishes, setDishes] = useState([])

  useEffect(() => {
  setDishes(dishesCrud.listenRealTimeDishes());}
  ,[]);

return (
<ul>
 {dishes.map((dish)=>(
  <li>{dish.price}</li>
)}
</ul>
)

Obviously it does not work, but I want to know if there is way to achieve something similar.

Upvotes: 1

Views: 367

Answers (1)

Frank van Puffelen
Frank van Puffelen

Reputation: 598817

You can't return data that is asynchronously loaded. The call to setDishes must happen from within the onSnapshot callback.

One simple way to do this is to pass along that callback to your listenRealTimeDishes function:

useEffect(() => {
  dishesCrud.listenRealTimeDishes(setDishes));
},[]);

And then call it from there:

  const listenRealTimeDishes = (setDishes) => {
     firebase
      .firestore()
      .collection("dishes")
      .onSnapshot((dishes) => {
        let dishesAux = [];
        dishes.forEach((dish) => {
          dishesAux.push({ id: dish.id, ...dish.data() });
        });
        setDishes(dishesAux);
      });
  };

Upvotes: 2

Related Questions