CODEWITHSUNDEEP
javascriptfirebasevue.jsgoogle-cloud-firestore
Greg Fielding
Greg Fielding

Reputation: 557

How to efficiently access firestore data within a v-for loop

We have a layout within our app for user applications to work events. We list those applications in a v-for loop. However, we really need to reference some additional data on that layout from our users collection. We can achieve this by filtering through our users collection, but it's way too slow.

Here's the code that works, but is so slow (with 20K users) that the site is unusable.

<span v-for="u in filteredInfo(props.row)">
                <span v-if="u && u.skills && u.skills.length > 0" style="display:inline;">
                  <v-popover>
                    <i class="fad fa-briefcase"></i>
                    <template slot="popover">
                    <span v-for="z in u.skills">{{z.title}} / </span>
                  </template>
                  </v-popover>
                </span>
              </span>
            </span>

Then:

filteredInfo(user) {
 return this.users.filter(member => {
    return member.id == user.userId
  })
}

If I understand what's happening correctly, each application in my v-for loop has to filter through 20K users to find and load the correct user data... in this case, listing their skills.

To speed up the performance of this layout, wouldn't it be more helpful to call the user data directly? Here's the code I'm trying to get to work, but it doesn't show the data in the v-for loop.

filteredInfo(user) {
 fb.usersCollection.doc(user.userId).get()
  .then(doc => {
    console.log(doc.data());
    return doc.data()
  })
}

Would my second method (above) speed up the page? If so, what do I need to do to get it working?

Thanks!

Upvotes: 1

Views: 73

Answers (1)

Daniel
Daniel

Reputation: 1267

The problem is on the size of the query.

You can:

  1. Divide the users by a parameter like first letter of the name. This way you would have 20 smaller documents.

  2. Use 1 document for each and every user and make queries using:

Limit and order

or

Paginate

Upvotes: 1

Related Questions