All topics

Large Number of Items - API

TCG.Store

7 months ago

Hi team,

Any way for me to fetch a specific number of results and lazy load the rest as a user scrolls? or should i upgrade my plan ?

The API returns over 22,000+ products for a tool i'm building.

I upgrade to scale up plan, but still having issues.
Lucas G

7 months ago

This is solved now right?
Just infinite scroll next to check off
❤️1
TCG.Store

7 months ago

Yeah this is solved 🙂 -- just need to figure out the infinite scroll piece. Currently experimenting now to see how i can tackle this
@TCG.Store
Yeah this is solved 🙂 -- just need to figure out the infinite scroll piece. Currently experimenting now to see how i can tackle this
Lucas G

7 months ago

I put the infinite scroll example in general but it got buried. Hopefully that's enough to get you on track
Otherwise, numbered pagination is still a good way to go about it
@Lucas G
I put the infinite scroll example in general but it got buried. Hopefully that's enough to get you on track
TCG.Store

7 months ago

ah, just found it. It's so good!! Are you willing to share the branch so i can see how you did it?
or i can try to recreate it, if not, numbered pagination might be the way to go -- especially that i have a large amount of items (22,000+)
@TCG.Store
ah, just found it. It's so good!! Are you willing to share the branch so i can see how you did it?
Lucas G

7 months ago

Sorry for the delay, haven't been around much
Here's the code for it:
function infiniteScroller (args, ctx) {
const observer = new IntersectionObserver((entries, observer) => {
for (const entry of entries) {
if (entry.isIntersecting) {
ctx.triggerActionEvent('loadNextPage', true);
}
}
});
const scrollSentinel = document.getElementById("scroll-sentinel");
observer.observe(scrollSentinel);
}
👍1
🔥1
🫶1
💡1
The loadNextPage event would trigger your API/pagination workflow
Which would depend on your setup
Ah, I should clarify. In the code you'll see a 'scroll sentinel'
Lucas G

7 months ago

I placed an empty div after the main content div which has that as its id
Basically, when the page hits that div it triggers your pagination workflow
nathandh

7 months ago

What is the {ctx} parameter?
TCG.Store

7 months ago

Thank you so much for sharing this @Lucas G and no worries on the delay. This is beyond super helpful.

I’m going to give this a try when I get back home! 🏡
needtheanswers

7 months ago

Thanks for sharing the code @Lucas G. Would be curious to know how your page setup looks like. Would you mind sharing your project link?
Xioteer

4 months ago

Hey @Lucas G, can you elaborate a bit on the general concept on this?

I assume I need the intersectionobserver package for your code?
Xioteer

4 months ago

It is a bit bold of me to go directly for infinite scroll, when I do not know how to handle the API calls yet either, but I am trying to piece everything together
Lucas G

4 months ago

You do not need the observer package but I do recommend you use it
The package has a better action which cleans up the observer, etc.
Lucas G

4 months ago

I should probably update that action, that was for a proof of concept
But anyways, the basic idea is to generate an event whenever the user reaches the end of the list
With that event you can then either trigger a call to fetch more data or render the new data if you already have it
Xioteer

4 months ago

Okay cool, I will look into that. Thanks!

Still need to work out how everything works, so I will probably come to you with one or two really basic questions.
👍1
@Lucas G
With that event you can then either trigger a call to fetch more data or render the new data if you already have it
Xioteer

4 months ago

Yeah, that's the question that I am trying to answer right now as well.

How to call "next" data.

Will take it step by step.
@Xioteer
Yeah, that's the question that I am trying to answer right now as well.

How to call "next" data.

Will take it step by step.
Lucas G

4 months ago

One way is to keep track of the amount of data rendered in a variable and add to it whenever you want to render the next "page"
Lucas G

4 months ago

For example, you can keep track of the number of items (ie. 25 per page) rendered and add an offset to the API call to get the next set
Or if you already fetched all the data and didn't render it all, you can calculate how many pages you want to display and render the data in chunks accordingly
@Lucas G
For example, you can keep track of the number of items (ie. 25 per page) rendered and add an offset to the API call to get the next set
Xioteer

4 months ago

That's pretty much the first approach I am taking, just read up on it a bit.
@Lucas G
Or if you already fetched all the data and didn't render it all, you can calculate how many pages you want to display and render the data in chunks accordingly
Xioteer

4 months ago

Just from a concept perspective. How would one batch the already received items? That sounds super complicated. probably slicing up a stored array then?
Lucas G

4 months ago

You can take a simply approach. Let's say take the size of the array and divide it by the number of items you want per page
That would give you the number of pages
Then you could track the number of pages loaded in a variable
Increasing page every time the observer event is triggered
Xioteer

4 months ago

Wow, I think I did it
That was actually super straight forward! Thanks for the help @Lucas G
Xioteer

4 months ago

Now the autofetch search function is creating weird behaviour. Just need to work that through
Xioteer

4 months ago

That one is driving me crazy though. haha
Xioteer

4 months ago

So autofetch is no good when you have infinite scroll,

Simply because of the fact that you need to keep track of pagenumbers, append arrays, reset them with search input changes and everything needs to happen in order

Large Number of Items - API

TCG.Store

Lucas G

TCG.Store

Lucas G

TCG.Store

Lucas G

Lucas G

nathandh

TCG.Store

needtheanswers

Xioteer

Xioteer

Lucas G

Lucas G

Xioteer

Xioteer

Lucas G

Lucas G

Xioteer

Xioteer

Lucas G

Xioteer

Xioteer

Xioteer

Xioteer

Stop scrolling. Start building.

Chat with @team-toddle

Video call our CEO

Get in touch!

Product

Company

Resources

Community