[Vuejs]-How do i paginate data from firebase. I keep getting errors

by

0👍

I’ve been able to solve this myself by extensively going through the firebase docs and using the getDocs method. Which gets the snapshot of the last doc on the page and using the startAfter method to view the next set of data. Kindly view below:

async nextTableData(){
        this.spinnerShow = true
        const documentSnapshots = await getDocs(this.todosCollectionQuery);

        // Get the last visible document
        const lastVisible = documentSnapshots.docs[documentSnapshots.docs.length-1];
        console.log("last", lastVisible);

        // Construct a new query starting at this document,
        const next = query(this.todosCollectionRef, orderBy("date", "desc"), startAfter(lastVisible), limit(10));

        onSnapshot(next, (querySnapshot) => {
            const fbTasks = [] 
            querySnapshot.forEach((doc) => {
                    const task = {
                        id: doc.id,
                        title: doc.data().title,
                        priority: doc.data().priority,
                        status: doc.data().status,
                        desc: doc.data().desc
                    }
                    fbTasks.push(task)
            })
                this.tasks = fbTasks
                this.spinnerShow = false
        })
    }

Leave a comment