Firebase - удерживать временные данные при отправке в облачное хранилище

Question

У меня есть календарь, управляемый данными из Firebase. Когда пользователь выполняет редактирование, перемещая или изменяя размер задачи, он быстро возвращается к своей исходной позиции, затем база данных обновляет клиента, и новые данные отображаются на странице.

Здесь простую диаграмму для объяснения:

A - User moves task in calendar UI
↓
B - UI flicks back to its previous position
↓
C - Data is sent to Cloud Firestore
↓
D - Updated data is returned to the client via a realtime listener
↓
E - UI is updated

Задержка между точками A и E может составлять всего 50 мс, но во времени до 1000 мс.

Есть ли способ после пользователь вносит изменения, чтобы хранить временные данные в браузере пользователя, которые отражают обновления, в то время как данные в firestore обновляются? Когда прослушиватель в реальном времени срабатывает, он сбрасывает временные данные, и все будет обновлено.

Это мой текущий код для прослушивания изменений и обновления переменной projects:

const [projects, loadingProjects, errorProjects] = useCollection(
    organisationID && firebase.firestore().collection('organisations').doc(organisationID).collection("projects"),
    {
      snapshotListenOptions: { includeMetadataChanges: true },
    }
  );

Как бы я go о реализации такой системы в React?

Answer 1

Один из способов сделать это - сохранить данные в локальном состоянии при первом получении, и календарь будет ссылаться на них.

То есть после первого рендеринга состояние Отдельно от пожарного.

Как-то так.

function App() {
  const [localData, setLocalData] = useState(null);

  useEffect(() => {
    setLocalData(dataFromFirestore)
  }, []);

  const handleClick = (data) => {
    setLocalData(data)
    saveDataToFirestore(data)
  }

  return <Calender onClick={handleClick} data={localData} />
}

Answer 2

Не знаю, можете ли вы переключиться или нет, но одно решение - использовать базу данных Firestore для этой цели, так как в этой базе данных, даже если ваша база данных фактически не обновлена, она достаточно умна, чтобы увидеть изменения и обновить данные.

Con: Поскольку счет выставляется в зависимости от того, сколько раз он прочитал базу данных, это может отражаться в вашем счете