Firebase firestore onSnapshot - Получайте обновления в реальном времени после первоначального запроса данных, используя обещания

Question

Чтобы показать прогресс загрузки, я пытаюсь обернуть мой вызов onSnapshot в обещание при начальной загрузке. Данные загружаются правильно, но обновления в реальном времени не работают правильно.

Есть ли способ реализовать функциональность этого типа с помощью метода onSnapshot?

Вот мой начальный захват данных. Обновления в режиме реального времени работали правильно до реализации оболочки обещаний:

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]);

Опять же, данные загружаются в DOM, но обновления в реальном времени не работают правильно.

Answer 1

onSnapshot не совсем совместимо с обещаниями. Слушатели onSnapshot слушают бесконечно, пока вы не удалите слушателя. Обещания разрешаются один раз и только один раз, когда работа выполнена. Нет смысла объединять onSnapshot (который не заканчивается, пока вы не скажете) с обещанием, которое разрешается, когда работа окончательно завершена.

Если вы хотите получить содержимое запроса только один раз, просто get () вместо onSnapshot. Это возвращает обещание, когда все данные доступны. См. документацию для получения более подробной информации.