Display your collection data on a single long page with a working preloader using repeaters.


Getting our data:

We won't be using any datasets for this tutorial, only one query and one repeater. We're keeping it simple and easy to mess around with. So let's go ahead and import our API first and declare our querying function:

import wixData from 'wix-data';

function get_data(){



.then( (results)=>{

const newItems=results.items;



Now let's think ahead a bit about what needs to occur. Right off the bat, we want some number of results to show when the page loads, let's say 30:


And each time we're near the end of the page and need to load more, we'll have to skip some incremental variable of results so we don't just repeat the same 30 over and over again. So let's declare a variable currIndex and use it to keep track of where our query needs to be to load the next 30 results:


We'll have to remember to increase this variable by 30 each time to fetch the next thirty results.

Feeding data to the repeater:

Now that we have our query set up, we need to make sure it is passed correctly to the repeater. To do this, we'll need one virtual container (array []) required for the repeater to receive the data smoothly, and a separate one to consume our query results behind the scenes:

Purchase this tutorial to continue reading.