Consultas Firebase

Hola Programador... Este post será tu guía para realizar consultas a tus base de datos de Firebase, tanto si trabajas directamente en MGPanel como si lo haces en tu editor de código de forma local.  Si usas MGPanel recuerda realizar antes la configuración de tu app de Firebase en la configuración de tu sitio web, si quieres consultar como hacerlo revisa el siguiente post: Conectando Firebase a MGPanel

Consultando un documento

//Llamado a los servicios de Firebase
import { doc, getDoc } from"https://www.gstatic.com/firebasejs/9.9.1/firebase-firestore.js"

//Función para traer un solo documento de la base de datos cuando tenemos el valor del id
window.btnConsultar = async function consultar(val){
 
   const docRef = doc(db, "users", val);
   const docSnap = await getDoc(docRef);
   if (docSnap.exists()) {
      console.log("Document data:", docSnap.data());
      //Aqui agregar todo tu código
 
   } else {
 
      console.log("No such document!");
 
   }
}

Nota: el valor de la variable val es el id del registro firebase, si no conoces este valor puedes realizar la consulta a través de otro campo usando el siguiente método.  

En este ejemplo el id sería: 0t57tyNvYlz0kw9UMtFa

Consultando un documentos con Where, o cuando no tenemos el Id

//Llamado a los servicios de Firebase
import { collection, query, where, getDocs } from "https://www.gstatic.com/firebasejs/9.9.1/firebase-firestore.js"

window.btnConsultar = async function consultar(val){
  
   const q = query(collection(db, "users"), where("cuenta", "==", val));
   const querySnapshot = await getDocs(q);
   querySnapshot.forEach((doc) => {
      // doc.data() is never undefined for query doc snapshots
      console.log(doc.id, " => ", doc.data());
   });
}

Nota: en este caso el valor de la variable val es el valor que vamos a comprar con el campo que deseamos filtrar, que en este ejemplo es el campo cuenta,  lo que quiere decir esta función es que me vas a traer todos los registros que el valor de val sea igual al campo cuenta de la tabla users.

En este caso doc.data() va a tener un JSON con todos los campos de ese registro. Si queremos acceder a unos de los campos solamente basta con colocar doc.data().nombrecampo y listo ya con eso accedemos al valor especifico de ese campo de ese registro.

Importante

Te diste cuenta que cada consulta en el import tiene diferentes métodos en el caso de una consulta por id tenemos: doc, getDoc y en el caso de la consulta con Where tenemos: collection, query, where, getDocs

Si necesitas realizar diferentes consultas vas a necesitar ambas cosas y no es necesario que agreges 2 import sino que en un mismo import puedes agregar todos los métodos, por ejemplo:

import { doc, getDoc, collection, query, where, getDocs } from "https://www.gstatic.com/firebasejs/9.9.1/firebase-firestore.js"

De esta forma puedes usar varios métodos en un mismo import y en un mismo contenido de tu sitio en MGPanel

Para terminar con este post cuando queremos traer todos los documentos de una tabla, hacemos lo siguiente.

Consultando los documentos de una tabla

//Llamado a los servicios de Firebase
import { collection, getDocs } from "https://www.gstatic.com/firebasejs/9.9.1/firebase-firestore.js"

//Función esta debe ser async

async function verUsuarios() {
 
 //Levantamiento de la data
 const querySnapshot = await getDocs(collection(db, "users"));
 var usuarios = []
 
 // Recorriendo los datos
 querySnapshot.forEach((doc) => {
 
    usuarios.push(doc.data());

 }); 
 
}

Nota: Aqui podemos guardar todos los datos en un array para recorrerlos luego, o podemos consumirlos directamente en la función.