PricingDocsAcademy
Bluesky ...
Wed, Dec 11, 10:17 PM
Log inSign up
Log inSign up
All topics

Large Number of Items - API

  • /attachments/1277444426934784042/1277444427429838920/CleanShot_2024-08-25_at_21.46.492x.png

    TCG.Store

    3 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.
    CleanShot_2024-08-25_at_21.46.492x.png

  • Lucas G

    3 months ago

    This is solved now right?
  • Just infinite scroll next to check off
    โค๏ธ1

  • TCG.Store

    3 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

    3 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

    3 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

    3 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
  • image.png
  • 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

    3 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

    3 months ago

    What is the {ctx} parameter?

  • TCG.Store

    3 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

    3 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?
Leave a comment

Stop scrolling. Start building.

toddle is a visual web app builder that rivals custom code โ€” but accessible to your entire team!

Try toddle โ€” it's free!
The two toddle Co-Founders Andreas and Kasper

Chat with @team-toddle

CEO and Co-Founder of toddle Andreas Mรธller

Video call our CEO

Hello, toddle!

Get in touch!

Product

PricingPackagesT&CsPrivacy Policy

Company

Press kitContact
Become partnerRefer and earn

Resources

DocumentationAcademyIntegrationsBlogFounder storiesHire experts

Community

DiscordLinkedInXYouTube

ยฉ Copyright 2024 toddle. All rights reserved.

toddle logo

Built in toddle