2020年06月26日

Firestoreのリアルタイム・リスナー

Firebase☓ReactでTODOリスト作成(Read)でFirestoreから情報を取得して表示する方法を説明したけどリアルタイム・リスナーを利用するとクライントのデータとサーバーのデータを同期させることができる。

onSnapshot()でサーバーの情報を監視でき変更が発生すると実行がされるのでその中でSnapshotを展開することでサーバーとクライアントのでーたを同期できる


useEffect(() => {
const getBinders = async () => {
firestore
.collection("binder")
.orderBy("createdAt", "desc")
.onSnapshot((snapshot) => {
const binders = [];
snapshot.forEach((doc) => {
binders.push({
...doc.data(),
id: doc.id,
});
});
changeBinders(binders);
});
};
getBinders();
}, []);
posted by ねこまんま at 00:00 | Firebase | 更新情報をチェックする