Google - Cloud Firestore WEB v.9

3rchuss

Jesus Abril

Posted on October 21, 2021

Google - Cloud Firestore WEB v.9

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;
Enter fullscreen mode Exit fullscreen mode

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) };
}
Enter fullscreen mode Exit fullscreen mode

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) };
}
Enter fullscreen mode Exit fullscreen mode

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) };
}
Enter fullscreen mode Exit fullscreen mode

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,
});
Enter fullscreen mode Exit fullscreen mode

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"));
Enter fullscreen mode Exit fullscreen mode

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()
});
Enter fullscreen mode Exit fullscreen mode

¡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.

Documentación Firestore ES

💖 💪 🙅 🚩
3rchuss
Jesus Abril

Posted on October 21, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Google - Cloud Firestore WEB v.9
javascript Google - Cloud Firestore WEB v.9

October 21, 2021