EagerToSing
EagerToSing

Reputation: 163

Propagate live updates return promise object instead of value

Working on beginner steps toward vue 3 and firestore migration. Stuck on simple.

import { getUsersCount } from "/src/firebase";
setup() {
    const usersCount = getUsersCount();

    return {
      usersCount,
    };
  },

Why it returns Promise Object, I cant find in manuals.

export const getUsersCount = async () => {
    //  const querySnap = await getDocs(query(collection(db, "users")));

    const q = query(collection(db, "users"));
    const unsub = onSnapshot(q, (querySnapshot) => {
        console.log("usersCount33: ", querySnapshot.size);
        //unsub();

        return querySnapshot.size;


    });
  }

Nad the last part with template,

<template>
  <p>Users Count: {{ usersCount }}</p>
</template>

Upvotes: 0

Views: 38

Answers (1)

Duannx
Duannx

Reputation: 8726

If you return the value inside a callback, you can not use async await syntax. You should do this:

export const getUsersCount = () => {
  return new Promise((resolve, reject) => {
    const q = query(collection(db, "users"));
    const unsub = onSnapshot(q, (querySnapshot) => {
      return resolve(querySnapshot.size)
    });
  })
}

// You still need to wait getUsersCount when using it
const usersCount = await getUsersCount();

Upvotes: 2

Related Questions