Cannot fetch data from Firestore collection

Question

I want to get data from Firebase's et_events collection and have the events displayed on the frontend.

I wrote the following code in the events.js file and tried to get the event information from Firebase, but I couldn't get it.

 export const actions = { fetchAllEvents: async ({ dispatch, commit }, eventIds) => { // TODO: fetch events from firestore console.log("start") const eventsSnap = await getDocs(query(eventsRef, where(documentId(), 'et_events', eventIds))) const events = await Promise.all( eventsSnap.docs.map(async snap => { const organization = await dispatch('fetchOrganization', snap.data().organizationId) return { id: snap.id, organization, isEvent: true, ...snap.data(), } }), ) events.sort((a, b) => { if(a.startDT > b.startDT) return 1; if(a.startDT < b.startDT) return -1; return 0; }); events.splice(1, 0, { isEvent: false, imgUrl: 'https://storage.googleapis.com/eventomy/statics/thumbnails/tutorial.png', title: 'Eventomyを始めよう', }) // remove code above and put your code instead commit(SET_EVENTS, events) }, }

Also, I don't quite understand the meaning of "dispatch", "commit", and "eventsSnap" in this code. Can anyone tell me?

The full code is published below.

 const SET_EVENTS = 'SET_EVENTS' export const state = () => ({ events: [], }) export const mutations = { SET_EVENTS: (state, events) => { state.events = events }, } export const getters = { allEvents(state) { return state.events }, } // import { doc, getDoc } from "firebase/firestore"; export const actions = { fetchAllEvents: async ({ dispatch, commit }, eventIds) => { // TODO: fetch events from firestore console.log("start") const eventsSnap = await getDocs(query(eventsRef, where(documentId(), 'et_events', eventIds))) const events = await Promise.all( eventsSnap.docs.map(async snap => { const organization = await dispatch('fetchOrganization', snap.data().organizationId) return { id: snap.id, organization, isEvent: true, ...snap.data(), } }), ) events.sort((a, b) => { if(a.startDT > b.startDT) return 1; if(a.startDT < b.startDT) return -1; return 0; }); events.splice(1, 0, { isEvent: false, imgUrl: 'https://storage.googleapis.com/eventomy/statics/thumbnails/tutorial.png', title: 'Eventomyを始めよう', }) // remove code above and put your code instead commit(SET_EVENTS, events) }, }

Answer 1

I'm not so sure of what you want to achieve on your code. Based on your statement above, you just want to get the documents data of the et_events collection. Here are some ways to get data from et_events .

To get all the documents from et_events :

import { collection, getDocs } from "firebase/firestore";

const querySnapshot = await getDocs(collection(db, "et_events"));
querySnapshot.forEach((doc) => {
  // doc.data() is never undefined for query doc snapshots
  console.log(doc.id, " => ", doc.data());
  // Do something here...
});

To get filtered documents, use where() query:

import { collection, query, where, getDocs } from "firebase/firestore";

const q = query(collection(db, "et_events"), where("<FIELDNAME>", "==", "<FIELDVALUE>"));

const querySnapshot = await getDocs(q);
querySnapshot.forEach((doc) => {
  // doc.data() is never undefined for query doc snapshots
  console.log(doc.id, " => ", doc.data());
  // Do something here....
});

If you know the document ID of a specific document:

import { doc, getDoc } from "firebase/firestore";

const docRef = doc(db, "et_events", "<DOCUMENTID>");
const docSnap = await getDoc(docRef);

if (docSnap.exists()) {
  console.log("Document data:", docSnap.data());
  // Do something here...
} else {
  // doc.data() will be undefined in this case
  console.log("No such document!");
}

---

For more information, you may checkout Get data with Cloud Firestore .