How can Vue use Firebase queries to implement infinite loading for displaying successive results?

Question

How can Vue use Firebase queries to implement infinite loading for displaying successive results?

I am currently working on developing a food ordering system. My focus is on creating the order history page and implementing infinite loading functionality.

My goal is to display the next five results each time the user clicks the "next" button, in descending order based on the created_at column.

However, I'm encountering an issue where clicking the "next" button repeatedly only shows the same set of results (sixth to tenth) every time.

I believe utilizing a for loop in my method could help resolve this issue, as I am using Firebase queries in my implementation.

Here is a snippet of my code:

<template>
    <div>
        // Code continues here...
    </div>
</template>

<script>
import CartSmartphone from "@/mobile/CartSmartphone.vue";
import NavbarMobile from "@/components/NavbarMobile.vue";
import FooterMobile from "@/sections/FooterMobile.vue";
import fireApp from '@/plugins/firebase'
const firebase = require("firebase");
require("firebase/firestore");
const db = firebase.firestore();

export default {
    name: 'UserSmartphone',
    // Components and data methods defined here...
    // Mounted and next page function implementation...
}
</script>

In my code, I am fetching data from the OrdersUser collection and storing it in the history array. I then render this data in the template section using a loop.

javascript firebase vue.js for-loop google-cloud-firestore

Answer 1

Answer №1

Ensure to keep track of the last visible document within your nextPage function to avoid starting the query after the initial 5 documents every time. Here's what you need to do:

Initialize a variable to store the last visible document while populating your list for the first time, as shown below:

const dbOrdersRef = db.collection('OrdersUser').doc(this.$route.params.id)
                      .collection('Orders').orderBy("created_at", "desc").limit(5);
dbOrdersRef.onSnapshot((querySnapshot) => {
    querySnapshot.forEach((doc) => {
        const historyData = doc.data()
        this.history.push(historyData)
        this.sample = doc.data().sample
    })
    this.lastVisible = querySnapshot.docs[querySnapshot.docs.length-1];
})

Utilize the lastVisible variable set during the initial load to begin your subsequent query, as illustrated below:

nextPage() {
     fireApp.auth().onAuthStateChanged((user) => {
         if (user) {
             const userId = fireApp.auth().currentUser.uid;
             const next = db.collection('OrdersUser')
                            .doc(userId)
                            .collection('Orders')
                            .orderBy("created_at", "desc")
                            .startAfter(this.lastVisible)
                            .limit(5);

             return next.onSnapshot((nextQuery) => {
                 nextQuery.forEach((doc) => {
                     const nextData = doc.data()
                     console.log(nextData)
                     this.history.push(nextData)
                 })
                 this.lastVisible = nextQuery.docs[nextQuery.docs.length-1];
             })

         };

     }) 
}

Add the lastVisible variable to your data() method so it can be accessed in both nextPage() and mounted() using this., as demonstrated below:

data() {
     return {
         customer: this.$route.params.id,
         history: [],
         sample: "",
         lastVisible: ""
     }
 },

Answer 2

Ensure to keep track of the last visible document within your nextPage function to avoid starting the query after the initial 5 documents every time. Here's what you need to do:

Initialize a variable to store the last visible document while populating your list for the first time, as shown below:

const dbOrdersRef = db.collection('OrdersUser').doc(this.$route.params.id)
                      .collection('Orders').orderBy("created_at", "desc").limit(5);
dbOrdersRef.onSnapshot((querySnapshot) => {
    querySnapshot.forEach((doc) => {
        const historyData = doc.data()
        this.history.push(historyData)
        this.sample = doc.data().sample
    })
    this.lastVisible = querySnapshot.docs[querySnapshot.docs.length-1];
})

Utilize the lastVisible variable set during the initial load to begin your subsequent query, as illustrated below:

nextPage() {
     fireApp.auth().onAuthStateChanged((user) => {
         if (user) {
             const userId = fireApp.auth().currentUser.uid;
             const next = db.collection('OrdersUser')
                            .doc(userId)
                            .collection('Orders')
                            .orderBy("created_at", "desc")
                            .startAfter(this.lastVisible)
                            .limit(5);

             return next.onSnapshot((nextQuery) => {
                 nextQuery.forEach((doc) => {
                     const nextData = doc.data()
                     console.log(nextData)
                     this.history.push(nextData)
                 })
                 this.lastVisible = nextQuery.docs[nextQuery.docs.length-1];
             })

         };

     }) 
}

Add the lastVisible variable to your data() method so it can be accessed in both nextPage() and mounted() using this., as demonstrated below:

data() {
     return {
         customer: this.$route.params.id,
         history: [],
         sample: "",
         lastVisible: ""
     }
 },

How can Vue use Firebase queries to implement infinite loading for displaying successive results?

Answer №1

Similar questions

Issue with passing reactive property to component in Vue 3 application

Is it possible to use jQuery to create a slide-up effect from the

Automating the testing of Google Analytics for every event triggered with Selenium WebDriver

Iterate over rows in a b-table component in Vue

The issue with the `.load` function in jQuery not functioning properly

What is the best way to import API Endpoints from various directories in an Express Server?

JavaScript: Scroll Through Images Horizontally with Descriptions for Each Image

How come I keep running into the "is not a function" issue when trying to use the generateRequest function with Polymer's iron-ajax

Tips on modifying the structure of a JSON array using a loop

vue-spa breadcrumbs component

Tips for executing jsfiddle code within Joomla 3.2

Is there a method to incorporate lists of varying types in a single v-for loop without causing any issues with type validations?

Can an Updatepanel control be added to a webpage using Javascript or JQuery?

Boosted - Automated Observable with controlled Update alert

Is there a way to convert this JSON object into HTML table code?

Utilizing dynamic JavaScript values in URL parameters before sending

Sending confidential data from the view to the controller without relying on form submission

Kendo UI Scheduler: The system encountered an overflow while converting to a date and time format

Exclude a variety of keys using wildcards or regex when conducting comparisons

Mastering the art of knowing when to implement asynchronous and synchronous programming techniques is essential for