Google - Cloud Firestore WEB v.9
Jesus Abril
Posted on October 21, 2021
Asumiendo que ya has configurado tu proyecto con la versión web 9, vamos a explicar brevemente como trabajar con esta versión, que para mi opinión personal, se hace más fácil y más rápida a la hora de trabajar con ella.
Esta versión tiene infinidad de métodos, pero solo hablaremos de los más usados y útiles.
Para comenzar
Necesitas importar e instanciar tu base de datos.
Y en nuestro caso lo propagaremos por nuestro proyecto en react.
import { initializeApp } from "firebase/app";
import { getStorage, ref } from "firebase/storage";
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
export default db;
Siempre debemos utilizar en esta nueva versión initializeApp con la configuración que obtuviste de tu proyecto.
Perfecto
Ya tenemos nuestra db lista para importar desde donde la necesitemos sin tener que volverla a iniciar.
Subamos datos
En tu archivo JS, donde necesites crear y subir los datos, utilizaremos los métodos que verás a continuación:
import db from "../middleware/firebase";
import { collection, addDoc } from "firebase/firestore";
const subirPelicula = (pelicula) => async {
try {
await addDoc(collection(db, "peliculas"), {
...pelicula
});
} catch(err) => { console.error(err) };
}
Como puedes ver addDoc añadiría un nuevo documento a tu colección llamada "películas", de la instancia de tu db base de datos.
Nota si no añadimos ninguna id o referencia addDoc la añadirá por ti.
Se trata de una key alfanumérica como esta 2FW02pxkfsiHgNCdUnnfs
Obtengamos datos
En algún momento necesitaremos obtener nuestros datos para mostrarlos en algún sitio, pues vamos a ello.
Solo una película
import db from "../middleware/firebase";
import { doc, getDoc, getDocs } from "firebase/firestore";
const obtenerPelicula = (id_pelicula) => async {
try {
const docRef = doc(db, "peliculas", id_pelicula);
const docSnap = await getDoc(docRef);
if (docSnap.exists()) {
//Si existe, tendremos nuestra pelicula en docSnap.data()
peliculas.push(docSnap.data());
} else {
console.log("No existe");
}
} catch(err) => { console.error(err) };
}
Si en cualquier caso queremos obtener toda la colección de películas... como verás utilizamos el método en plural 🤯 facil no?
import db from "../middleware/firebase";
import { collection, getDocs } from "firebase/firestore";
const obtenerPeliculas = () => async {
try {
const querySnapshot = await getDocs(collection(db, "peliculas"));
querySnapshot.forEach((doc) => {
peliculas = doc.data();
});
} catch(err) => { console.error(err) };
}
Modificar
Si sabes el path o la id que quieres modificar sería tan sencillo como esto, utilizando el setDoc aunque valdría igual addDoc, pero os recomiendo siempre usar la primera para evitar liarse.
import { doc, setDoc } from "firebase/firestore";
await setDoc(doc(db, "peliculas", "id_de_la_pelicula"), {
enCines: true,
});
Borrar
Al igual que modificar necesitaremos saber la id o path de lo que queremos borrar.
import { doc, deleteDoc } from "firebase/firestore";
await deleteDoc(doc(db, "peliculas", "id_de_la_pelicula"));
Y por último, si lo que queremos es borrar solo un campo.
import { doc, updateDoc, deleteField } from "firebase/firestore";
const peliculaRef= doc(db, "pelicula", "id_de_la_pelicula");
await updateDoc(peliculaRef, {
campoAEliminar: deleteField()
});
¡Eso es todo!
Os recomiendo usar esta nueva versión, aunque al principio parezca más difícil.
Recordad que todo tiene una curva de aprendizaje, paciencia y práctica.
Si quieren ampliar más, toda la documentación esta muy bien detallada.
Posted on October 21, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.