Importing User Data from filtered Array (VUE3 Quasar Firebase)-CodePudding

I am importing the data from the currently signed in user in order to manage the entire user profile page and all the associated actions.

On one hand I have the auth.currentUser and on the other I have the USERS collection in the db which stores all the additional data related to that particular user.

Now, my question concerns optimization. What would be the ideal way to get this user's data? Currently I am getting the entire users collection and filtering to get the one that matched the uid from the route params, yet I was told that loading the entire users collection and filtering the one I want to display was less than ideal, that I should rather create a function to get a specific user by a property such as name or id. This is what confuses me, is that not essentially what I am doing by filtering the users collection? How else would it be best to get that user's info? By creating this function in the Store and not in the component itself?

Currently it's looking like this:

UserPage.vue

const storeUsers = useUserStore();
const users = storeUsers.users;
const route = useRoute();
const id = route.params.id;

const userData = computed(() => {
  return users.find((u) => u.uid == id);
});

Any way to optimize this would be appreciated.

*Adding a screenshot of the Firestore console (data model):

CodePudding user response：

Your code is loading every document from the users collection into your application code, and then choosing there which single document you are actually interested in. Since you pay for every document read from the database, and you (and your users) pay for all bandwidth that is used, this is wasteful - especially as you start adding more users to the collection.

Instead you should use a query to read only the document(s) you are interested in from the database into your application code. Read the documentation for examples for all supported SDK versions.

CodePudding user response：

finally solved it using a query as suggested. I am triggering the getUserInfo action whenever a user signs in and then assigning it to a pinia state called currentUserData:

AUTH STORE

async getUsers() {
      onSnapshot(userCollectionRef, (querySnapshot) => {
        let users = [];
        querySnapshot.forEach((doc) => {
          let user = {
            did: doc.id,
            ...doc.data(),
          };
          this.users.push(user);
        });
      });
    },

    getUserInfo(userCredential) {
      const q = query(
        userCollectionRef,
        where("uid", "==", userCredential.user.uid)
      );
      onSnapshot(q, (snapshot) => {
        let currentUserData = [];
        snapshot.docs.forEach((doc) => {
          currentUserData.push({ ...doc.data(), id: doc.id });
        });
        this.currentUserData = currentUserData;
      });
    }