Firebase firestore onSnapshot - Get real-time updates after initial data query using promises

Question

In order to show loading progress, I'm trying to wrap my onSnapshot call in a promise upon initial fetch. Data is loading correctly, but real-time updates are not functioning correctly.

Is there a way implement this type of functionality using the onSnapshot method?

Here's my initial data grab. Real-time updates functioned correctly before implementing the promise wrapper:

const [heroesArr, setHeroesArr] = useState([]);
const db = firebase.firestore();
const dbError = firebase.firestore.FirestoreError;

useEffect(() => {
    const promise = new Promise((resolve, reject) => {
      db.collection("characterOptions")
        .orderBy("votes", "desc")
        .onSnapshot(coll => {
          const newHeroes = [];
          coll.forEach(doc => {
            const {
              name,
              votes
            } = doc.data();
            newHeroes.push({
              key: doc.id,
              name,
              votes
            });
          });
          if(dbError) {
             reject(dbError.message)
             } else {
             resolve(newHeroes);
            }
        });
    });
    promise
      .then(result => {
        setHeroesArr(result);
      })
      .catch(err => {
        alert(err);
      });
  }, [db]);

Again, data is being loaded to the DOM, but real-time updates are not functioning correctly.

Doug Stevenson Doug Stevenson · Accepted Answer · 2019-06-21T06:34:43

onSnapshot is not really compatible with promises. onSnapshot listeners listen indefinitely, until you remove the listener. Promises resolve once and only once when the work is done. It doesn't make sense to combine onSnapshot (which doesn't end until you say) with a promise, which resolves when the work is definitely complete.

If you want do get the contents of a query just once, just get() instead of onSnapshot. This returns a promise when all the data is available. See the documentation for more details.

Firebase firestore onSnapshot - Get real-time updates after initial data query using promises

2 Answers