How do I add load more when querying a collection

Ask the community
,
1

I set up a query to filter my data and display it with repeater, however I can’t find resources on building a load more button for querying.

2

Why not using a dataset? There you already have all that features prepared to work with.

3

I was using dataset but I have a field type that consists of an array of objects, which makes it hard to do it with wix dataset API.

4

Hi @samuellmkit :raised_hand_with_fingers_splayed:

In your query function, just use the current number of items to skip in the query, here’s a simple example:

import wixData from 'wix-data';

$w.onReady(() => {
    $w('#repeater').data = [];
    loadMore();
})

function loadMore() {
    const skip = $w('#repeater').data.length;
    
    return wixData.query('collection')
    .skip(skip).ascending('name').limit(20).find().then(x => {
        if (x.length > 0) {
            let data = $w('#repeater').data;
            data = data.concat(x.items);
            $w('#repeater').data = data;
        }
    })
}

This will load 20 more products each time it’s triggered.

Hope this helps~!
Ahmad

5

Nice one! :zap:

Just some little facelift…

import wixData from 'wix-data';
//-------------User-Interface-----------
let loadingItemAmount = 20
let myRepeater = "#repeater1";
let myDatabase = 'MyCollectionIDhere';
//-------------User-Interface-----------

$w.onReady(() => {
 $w(myRepeater).data = [];
 $w('#myButton').onClick(()=>{loadMore();});
});

function loadMore() {
 const skip = $w(myRepeater).data.length;
 
 return wixData.query(myDatabase).skip(skip).limit(loadingItemAmount).find().then(x => {
 if (x.length > 0) {
 let data = $w(myRepeater).data;
 data = data.concat(x.items);
 $w(myRepeater).data = data;
 }
 })
}
6

@russian-dima The " loadMore( ) " must be called when the page is opened to load the initial items in the repeater, otherwise, the repeater will remain empty.

I do agree that it needs to be triggered, but I left it to the user preference, so can use it with a button click or when he reaches the bottom of the page.

7

@ahmadnasriya Wow, thanks for the great input but what if I want it to be sorted? So I have a query beforehand, and another query for load more, how do I sort them out accordingly? From what I have now, my first query has a sorting function but when I press load more, the sorting will not work (due to the limit()?), please advise me on this.

8

@samuellmkit I’ve added an ascending() method to the query, pass it the fieldId you want to sort the items with and you’re ready to roll.

There’s no reason for the sort to not work, and the limit here is the number of items retrieved from the database each time the function is invoked, and it doesn’t have anything to do with the number of items on the page.

I sensed from your reply that you might be using the dataset, am I correct? You should either use the dataset or the query, never use both as they will conflict with each other.

9

@ahmadnasriya Ah, I see, I missed out on the .ascending part. Thanks a lot!

10

@samuellmkit you’re welcome :blush: Anytime

11

@ahmadnasriya I have another issue, so I did my filtering in query.then() and how would I be able to check if there is next page when I have a new variable that holds the filtered results inside the query promise?

12

@samuellmkit yes you can, after the promise is resolved, use the returned object to determine if the result has next or not.

if (x.length > 0) {
    if (x.hasNext()) {
        // Do the following
    }
}
13

@ahmadnasriya Sorry, I think I phrase it wrongly, what I was referring to was that I had to manipulate the data in the callback(the return results of query) and how can I still determine if the result has a next page or not?

14

@samuellmkit I still don’t understand! Anyways, this is a completely different topic, please crate a new question about it.