Quiero obtener automáticamente nuevos mensajes entrantes de una colección de firestore usando onSnapshot. Si bien puedo configurar el estado dentro de la devolución de llamada, no puedo leerlo.
const [messages, setMessages] = useState(null); const [chat, setChat] = useState(props.chatId); useEffect(() => { const q = query(collection(db, "messages"), where("chat_id", "==", chat), orderBy("date","desc"), limit(5)); // Create the DB listener const unsuscribe = onSnapshot(q, (querySnapshot) => { console.log(messages); if(messages === null){ console.log("setting messages the first time"); setMessages(querySnapshot.docs) }else{ console.log("updating messages"); setMessages([...querySnapshot.docs, ...messages]) } }); return () => { console.log("unsubscribe"); unsuscribe(); } }, [chat]); Cada vez que onSnapshot , los messages siempre son null , pero setMessages funciona ya que se muestran los mensajes. Intenté tantos enfoques pero no pude hacerlo funcionar.
Ayuda muy apreciada.
Así que logré encontrar una solución. El truco es escuchar los cambios de estado de los mensajes con useEffect()
const [snapShot, setSnapshot] = useState(null); const [messages, setMessages] = useState(null); const [chat, setChat] = useState(props.chatId); useEffect(() => { const q = query(collection(db, "messages"), where("chat_id", "==", chat), orderBy("date","desc"), limit(5)); const unsuscribe = onSnapshot(q, (querySnapshot) => { setSnapShot(querySnapshot) }); return () => { unsuscribe(); } }, [chat]); useEffect(() => { if(messages === null){ console.log("setting messages the first time"); setMessages(snapShot.docs) }else{ console.log("updating messages"); setMessages([...snapShot.docs, ...messages]) } }, [snapShot]);¿Intentaste esto de la documentación ?
const q = query(collection(db, "cities"), where("state", "==", "CA")); const unsubscribe = onSnapshot(q, (snapshot) => { snapshot.docChanges().forEach((change) => { if (change.type === "added") { console.log("New city: ", change.doc.data()); } if (change.type === "modified") { console.log("Modified city: ", change.doc.data()); } if (change.type === "removed") { console.log("Removed city: ", change.doc.data()); } }); });Además, la pregunta es un poco confusa sobre lo que quieres lograr.
La querySnapshot de consulta que obtiene de Firestore siempre contiene todas las instantáneas que coinciden con la consulta, no solo los documentos modificados/nuevos.
Entonces, su controlador onSnapshot puede ser mucho más simple:
const unsubscribe = onSnapshot(q, (querySnapshot) => { setMessages(querySnapshot.docs) }); Entonces: cada vez que Firestore le notifica que los datos en q han cambiado, pasa los datos al estado/UI para renderizar.