FireBase OnSnapshot получает обновление до завершения создания

Question

У меня есть «пост», который прослушивает изменения в своих комментариях в react примерно так:

// React hook state 
const [comments, setComments] = useState([])

// My listener in useEffect
db.collection(`users/${userId}/posts/${postId}/comments`)
   .onSnapshot((querySnapshot) => {
      let newComments = []
      querySnapshot.forEach(function (doc) {
        newComments.push({
            id: doc.id,
            ...doc.data()
        })
      })
      setComments(newComments)
   })

Когда пользователь создает новые комментарии, я устанавливаю состояние загрузки и отключаю раздел комментариев

// React hook
const [isLoading, setLoading] = useState(false)
// Add comment
const addComment = () => {
   const comment = {text:"hello"}
   setSaving(true)
   db.collection(`users/${postUid}/posts/${postId}/comments`).doc()
      .set(comment)
      .then(()=>{
         setSaving(false)
      })
}

Моя проблема (хорошая проблема), подписка onSnapshot получает новый комментарий до того, как мой addComment обратный вызов завершен, создавая некоторые визуальные проблемы: - Приложение выглядит глючно, когда вход комментария все еще загружается, но комментарий уже есть - если есть ошибка (например, проблема с разрешением базы данных), комментарий появляется в списке и затем исчезает ...

Любая идея, что я могу изменить не иметь обновления onSnapshot до завершения создания?

Answer 1

Как объяснено здесь в do c:

Локальные записи в вашем приложении немедленно вызовут прослушиватели снимков. Это связано с важной функцией, называемой «компенсацией задержки». Когда вы выполняете запись, ваши слушатели будут уведомлены с новыми данными, прежде чем данные будут отправлены на сервер.

Полученные документы имеют свойство metadata.hasPendingWrites, которое указывает, есть ли у документа локальные изменения, которые не имели было написано в бэкэнд еще.

См. Также следующее замечание в разделе «Прослушивание нескольких документов в коллекции» section :

Как описано выше в разделе «События для локальных изменений» , вы будете получать события сразу для ваших локальных записей. Ваш слушатель может использовать поле metadata.hasPendingWrites в каждом документе, чтобы определить, есть ли в документе локальные изменения, которые еще не были записаны в бэкэнд.

Таким образом, вы можете использовать это свойство только для отображения изменений если это было записано в серверную часть, что-то вроде следующих строк (не проверено):

db.collection(`users/${userId}/posts/${postId}/comments`)
   .onSnapshot((querySnapshot) => {
      let newComments = []
      querySnapshot.forEach(function (doc) {
        if (!doc.metadata.hasPendingWrites) {
           newComments.push({
               id: doc.id,
               ...doc.data()
           })
        }
      })
      setComments(newComments)
   })