Paginate slice items

[mannypa]

Hello everyone, I'm currently trying to achieve infinite scroll on my gallery and would like to implement simple pagination for my slice items. Is it possible to do that? After i query my document i get only 1 result witch is my gallery slice with items, can i paginate these items ?

[Phil (Phil Snow)]

Hi Manny,

There is no way to paginate Slice items through the API, and the only way you will be able to do this is on the front-end of your website application. You can do this by using a plugin like react-infinite-scroll-component on the component level.

Check out this example to see how to use the react-infinite-scroll-component plugin.

next-js infinite scroll - CodeSandbox

In your component, after you've passed all your Slice items down as props, you can call this plugin's component and pass it the Slice items in the dataLength attribute.

Although because you will have the whole list of Slice items returned you will have to mimic pagination with the Javascript Slice function:

Array.prototype.slice() - JavaScript | MDN

function paginate(array, page_size, page_number) {
  // human-readable page numbers usually start with 1, so we reduce 1 in the first argument
  return array.slice((page_number - 1) * page_size, page_number * page_size);
}

console.log(paginate([1, 2, 3, 4, 5, 6], 2, 2));

Let me know if you have any questions. Also what is your use case for the infinite scroll, is it for speed or purely cosmetic?

Thanks.