This is my code below

<nav v-if="(tasks.length >= 7)" aria-label="Page navigation example">
    <ul >
        <li >
        <a  href="#" aria-label="Previous">
            <span aria-hidden="true">&laquo;</span>
        </a>
        </li>
        <li ><a  href="#">1</a></li>
        <li  @click="nextTableData"><a  href="#">2</a></li>
        <li  v-if="(tasks.length > 14)"><a  href="#">3</a></li>
        <li >
        <a  href="#" aria-label="Next">
            <span aria-hidden="true">&raquo;</span>
        </a>
        </li>
    </ul>
</nav>

nextTableData(){
    let q
    this.spinnerShow = true
    if (this.lastdoc != null) {
        q = query(this.todosCollectionRef, orderBy("date", "desc"), startAfter(this.lastdoc));
        console.log(q, this.lastdoc);
    } else {
        q = query(this.todosCollectionRef, orderBy("date", "desc"), limit(15))
        console.log(q, this.lastdoc);
    }
    onSnapshot(q, (querySnapshot) => {
        const fbTasks = [] 
        this.lastdoc = querySnapshot.docs[querySnapshot.docs.length - 1]
            console.log(this.lastdoc); 
        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
    })
}

I tried getting the snapshot of the lastdoc on the table from firebase and then when i click on the button i'll use the startafter method from firebase to get the data from the last doc i got, but it throws error:

Function startAfter() called with invalid data. Unsupported field value: undefined

and only the code in the else block runs

CodePudding user response：

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
        })
    }

CodePudding user response：

To paginate data from Firebase, you can use the limitToFirst() or limitToLast() methods to specify the number of items you want to retrieve from a query. For example, to retrieve the first 10 items from a query, you can use the following code:

var query = firebase.database().ref("items").limitToFirst(10);

To retrieve the next set of items, you can use the startAt() or endAt() methods to specify the starting point for the next query. For example, to retrieve the next 10 items after the first query, you can use the following code:

var query = firebase.database().ref("items")
                      .startAt(10)
                      .limitToFirst(10);

This will retrieve the items with a key greater than 10, up to a maximum of 10 items. You can continue paginating through the data in this way, using the startAt() or endAt() methods to specify the starting point for each subsequent query.

It's important to note that the limitToFirst() and limitToLast() methods are only used to limit the number of items returned by a query, and do not guarantee a consistent order for the results. If you need to paginate through data in a consistent order, you should use the orderByKey() or orderByChild() methods in combination with the startAt() or endAt() methods to specify the starting point for each query.

**Edit for Julia: It sounds like you're using the Firestore version of Firebase, which uses different methods for pagination than the Realtime Database. In Firestore, you can use the limit() method to limit the number of documents that are returned by a query. For example, to retrieve the first 10 documents from a query, you can use the following code:

var query = firebase.firestore().collection("items").limit(10);

To retrieve the next set of documents, you can use the startAfter() or startAt() methods to specify the starting point for the next query. For example, to retrieve the next 10 documents after the first query, you can use the following code:

var query = firebase.firestore().collection("items")
                      .startAfter(10)
                      .limit(10);

This will retrieve the documents with a key greater than 10, up to a maximum of 10 documents. You can continue paginating through the data in this way, using the startAfter() or startAt() methods to specify the starting point for each subsequent query.

It's important to note that the limit() method is only used to limit the number of documents returned by a query, and does not guarantee a consistent order for the results. If you need to paginate through data in a consistent order, you should use the orderBy() method in combination with the startAfter() or startAt() methods to specify the starting point for each query.