"Every time you use Firebase storage, you can expect a

Question

"Every time you use Firebase storage, you can expect a

I am facing an issue with my Vue 3 application. I am trying to retrieve a link to a document from the repository, but all I keep getting is a promise instead of the actual link. Can someone help me understand why this is happening?

async FetchData({ state, commit }, to) {
  try {
    commit("setLoading", true);
    const q = query(collection(db, to));

    await onSnapshot(q, (querySnapshot) => {
      const data = [];

      querySnapshot.forEach((doc) => {
        let films = async (to) => {
          const starsRef = ref(storage, `images/${doc.id}/poster.png`);

          return await getDownloadURL(starsRef);
        };

        // const poster=`gs://cell-11ef4.appspot.com/images/${doc.id}/poster.png`

        let item = {
          id: doc.id,
          name: doc.data().name,
          slug: doc.data().slug,
          country: doc.data().country,
          duration: doc.data().duration,
          year: doc.data().year,
          video: doc.data().video,
          genres: doc.data().genres,
          actors: doc.data().actors,
          poster: to === "films" ? films() : null,
          // BipPoster: url,
        };

        data.push(item);

        // Get the download URL
      });

      commit("setData", { data, to });
    });
  } catch (err) {
    console.log(err);
  } finally {
    commit("setLoading", false);
  }
}

let url = async () => {
  let url;
  const starsRef = ref(storage, `images/${doc.id}/poster.png`);

  await getDownloadURL(starsRef).then((p) => {
    url = p;
  });

  return url;
};

The Output I am currently getting:

https://i.sstatic.net/FXYdI.png

https://i.sstatic.net/Etf0O.png https://i.sstatic.net/zrjn8.png

javascript firebase vue.js google-cloud-platform google-cloud-storage

Answer 1

Answer №1

To efficiently handle multiple promises in JavaScript, it is recommended to utilize Promise.all() method like so:

const promises = [];
querySnapshot.forEach((doc) => {
     const starsRef = ref(storage, `images/${doc.id}/poster.png`);

     promises.push(getDownloadURL(starsRef));
});

const urlsArray = await Promise.all(promises);

Answer 2

To efficiently handle multiple promises in JavaScript, it is recommended to utilize Promise.all() method like so:

const promises = [];
querySnapshot.forEach((doc) => {
     const starsRef = ref(storage, `images/${doc.id}/poster.png`);

     promises.push(getDownloadURL(starsRef));
});

const urlsArray = await Promise.all(promises);

Answer 3

Answer №2

Convert the documents collection into an array of promises that will resolve with complete item data, including download URL, and await all of them using Promise.all().

You are also setting up a real-time updates listener, which contradicts what you intend for FetchData to accomplish. It is recommended to use getDocs() instead of onSnapshot()

async FetchData({ state, commit }, to) {
  try {
    commit("setLoading", true);

    // `onSnapshot` registers a real-time updates listener,
    // use `getDocs` to retrieve documents
    const { docs } = await getDocs(query(collection(db, to)));

    // Iterate through the `docs` array and return fully detailed objects
    const data = await Promise.all(
      docs.map(async (doc) => ({
        ...doc.data(),
        id: doc.id,
        poster:
          to === "films"
            ? await getDownloadURL(ref(storage, `images/${doc.id}/poster.png`))
            : null,
      }))
    );

    commit("setData", { data, to });
  } catch (err) {
    console.error(err);
  } finally {
    commit("setLoading", false);
  }
},

If you truly want to set up a real-time updates listener, do it in an effect hook where you can also clean up the listener

useEffect(() => {
  // Return the unsubscribe function as cleanup
  return onSnapshot(query(collection(db, to)), async ({ docs }) => {
    try {
      const data = await Promise.all(
        docs.map(async (doc) => ({
          ...doc.data(),
          id: doc.id,
          poster:
            to === "films"
              ? await getDownloadURL(
                  ref(storage, `images/${doc.id}/poster.png`)
                )
              : null,
        }))
      );

      commit("setData", { data, to });
    } catch (err) {
      console.error(err);
    }
  });
}, [to]);

Answer 4

Convert the documents collection into an array of promises that will resolve with complete item data, including download URL, and await all of them using Promise.all().

You are also setting up a real-time updates listener, which contradicts what you intend for FetchData to accomplish. It is recommended to use getDocs() instead of onSnapshot()

async FetchData({ state, commit }, to) {
  try {
    commit("setLoading", true);

    // `onSnapshot` registers a real-time updates listener,
    // use `getDocs` to retrieve documents
    const { docs } = await getDocs(query(collection(db, to)));

    // Iterate through the `docs` array and return fully detailed objects
    const data = await Promise.all(
      docs.map(async (doc) => ({
        ...doc.data(),
        id: doc.id,
        poster:
          to === "films"
            ? await getDownloadURL(ref(storage, `images/${doc.id}/poster.png`))
            : null,
      }))
    );

    commit("setData", { data, to });
  } catch (err) {
    console.error(err);
  } finally {
    commit("setLoading", false);
  }
},

If you truly want to set up a real-time updates listener, do it in an effect hook where you can also clean up the listener

useEffect(() => {
  // Return the unsubscribe function as cleanup
  return onSnapshot(query(collection(db, to)), async ({ docs }) => {
    try {
      const data = await Promise.all(
        docs.map(async (doc) => ({
          ...doc.data(),
          id: doc.id,
          poster:
            to === "films"
              ? await getDownloadURL(
                  ref(storage, `images/${doc.id}/poster.png`)
                )
              : null,
        }))
      );

      commit("setData", { data, to });
    } catch (err) {
      console.error(err);
    }
  });
}, [to]);

Answer 5

Answer №3

async FetchData({ state, commit }, destination) {
  try {
    const queryData = query(collection(db, destination));

    await onSnapshot(queryData, (querySnapshot) => {
      const allItems = querySnapshot.docs.map(async (doc) => {
        let item = {
          id: doc.id,
          name: doc.data().name,
          slug: doc.data().slug,
          country: doc.data().country,
          duration: doc.data().duration,
          year: doc.data().year,
          video: doc.data().video,
          genres: doc.data().genres,
          actors: doc.data().actors
        };
        if (destination === "films") {
          const starsRef = ref(storage, `images/${doc.id}/poster.png`);
          item.poster = await getDownloadURL(starsRef);
        }
        return item;
      });
      Promise.all(allItems)
        .then((data) => commit("setData", { data, destination }))
        .catch(console.error);
    });
  } catch (error) {
    console.error(error);
  }
}

Answer 6

async FetchData({ state, commit }, destination) {
  try {
    const queryData = query(collection(db, destination));

    await onSnapshot(queryData, (querySnapshot) => {
      const allItems = querySnapshot.docs.map(async (doc) => {
        let item = {
          id: doc.id,
          name: doc.data().name,
          slug: doc.data().slug,
          country: doc.data().country,
          duration: doc.data().duration,
          year: doc.data().year,
          video: doc.data().video,
          genres: doc.data().genres,
          actors: doc.data().actors
        };
        if (destination === "films") {
          const starsRef = ref(storage, `images/${doc.id}/poster.png`);
          item.poster = await getDownloadURL(starsRef);
        }
        return item;
      });
      Promise.all(allItems)
        .then((data) => commit("setData", { data, destination }))
        .catch(console.error);
    });
  } catch (error) {
    console.error(error);
  }
}

"Every time you use Firebase storage, you can expect a

Answer №1

Answer №2

Answer №3

Similar questions

Concealing the Load More Data Button in ASP.net MVC using Ajax and Javascript

Is it possible to operate a jQuery mobile web application while disconnected?

How can PHP be used to access every element within an array that has been passed through an AJAX call?

What method is most effective for storing 'likes' in Firebase?

After an error occurs, the Node.js Restify code will be executed

Using Laravel with Vue and <router-link> does not update the content as expected

How to send route parameters to a controller function in ExpressJS

Ways to stop user authentication in Firebase/Vue.js PRIOR to email verification

Automated browsing: identifying the difference between AJAX and iframes

Exploring the process of iterating through and organizing a JavaScript array

Ways to combine multiple then() promises into a single one

Why is fading out columns in an HTML table with jQuery's .fadeTo() method taking so long?

Using jQuery and AJAX manipulates the value of my variable

What is the best way to transform an array of objects into a single string in JavaScript?

Significant lag experienced when using $rootscope.$on with a large object

Add a JavaScript library to the header directly from the body of a webpage, ensuring it is exclusive to a single

javascript implementing optional chaining for a single parameter

JSP Implementation of a Gravity-Driven Dynamic List

Angular directive failed to correctly retrieve object

Unlimited Possibilities in Designing Shared React Components