Large Number of Items - API

  • tcg.store-1277444426934784042

    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.
    1277444427429838920-CleanShot_2024-08-25_at_21.46.492x.png
  • lucasg-1277467905268650066

    Lucas G

    7 months ago

    This is solved now right?
  • Just infinite scroll next to check off
    ❀️1
  • tcg.store-1277630317728894996

    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
  • lucasg-1277983622267277372

    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
  • tcg.store-1277993434510131341

    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+)
  • lucasg-1278417023088721960

    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
  • 1278417134732705792-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'
  • lucasg-1278417847566995540

    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.-1278518647895363647

    nathandh

    7 months ago

    What is the {ctx} parameter?
  • tcg.store-1278518940787544129

    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-1278991226200395811

    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-1318368673932775576

    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-1318369009862705293

    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
  • lucasg-1318369405868052521

    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.
  • lucasg-1318369763264692244

    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-1318370092442062898

    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
  • xioteer-1318370642101403659

    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.
  • lucasg-1318371162891358281

    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"
  • lucasg-1318372270690926613

    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
  • xioteer-1318372554775330838

    Xioteer

    4 months ago

    That's pretty much the first approach I am taking, just read up on it a bit.
  • xioteer-1318372808228737086

    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?
  • lucasg-1318374115517792357

    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-1318535871913398314

    Xioteer

    4 months ago

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

    Xioteer

    4 months ago

    Now the autofetch search function is creating weird behaviour. Just need to work that through
  • xioteer-1318554988238209074

    Xioteer

    4 months ago

    That one is driving me crazy though. haha
  • xioteer-1318560652331057184

    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

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!

Β© Copyright 2024 toddle. All rights reserved.