Infinite scroll with paginated external API

Hi,

I have a repeating group that gets data from an external API. The API returns data in increments of 50 records and requires successive API calls (pagination) to retrieve every additional 50 records.

I can’t seem to figure out how I can load additional records in the repeating group upon scrolling (reaching the end of the current list of records).

Any guidance would be much appreciated.

Thanks,
Mikhaeel

There is a free plugin that is something like ‘elements in view’ the developer put up a forum post outlining how to use it within a repeating group infinite scroll scenario…use that and incorporate your api call into that setup.

Hey, thanks for your response. But this doesn’t solve my problem.

It does…it just is not an answer that provides you step by step guidance. My approach as an educator is akin to the concept of teaching a man to fish as opposed to giving a man a fish. Best thing to get comfortable with in learning Bubble is to take concepts and try to understand them to your exact use case, as so many people are doing so many different things, often times you won’t find the answer for your specific use case, but can take the concepts and apply them to your use case to get to solving issues.

If you look into the ‘elements in view’ plugin, you’ll quickly learn how to apply it to a dataset coming from your database…then if you are already familiar with how to use an API call as a datasource for your repeating group, you’ll be able to put everything together as you need to.

The “Elements in view” plugin simply provides the function of telling you when a given element is in view, as the name suggests. Yes, that might be useful so we know when a user has reached the bottom of a list in a repeating group. But it provides absolutely no solution to successively appending additional data into the same repeating group from an external API — which is the issue that requires solving.

When the element is in view, run an api call to get more results into your repeating group…then take a creative approach to figuring out how to get the results into your repeating group; maybe using a custom state to hold a list or a plugin that can do it.

Good luck in solving the problem.

2 Likes

There’s a “RG Scroll position detector” plugin, I use it to take the max scroll minus current scroll, and if its less than I want then I make the API call and add the result to a custom state (list). So it continuously adds every time.

Then the RG’s datasource is that custom state.

Another custom state is needed (number) to keep track of the page number, so when you scroll again it adds 1 to the page number.

Very crude explanation but hopefully that helps :rofl: :rofl:

I never knew of this plugin. I’ve always used the elements in view and put it into the RG and conditionally make it visible based on the cell number I’d be using to determine when to add more items to the RG. The RG Scroll position detector would likely make that easier.

1 Like

Sounds like a potential solution. I’ll give this a shot. Thanks!

1 Like

That is the right attitude.