Hello, my project uses an API that will only return 35 results per call. When the data is returned it comes with two additional pieces of information. HasMore=true and cursor=668192591000 telling me that there is more data to be had. Most of the data I am retrieving has a couple of hundreds results. I am displaying the data in a vertical repeating group and my hope/intention is to be able to load a second, third, fourth, etc. API call with the updated cursor information as the user scrolls through the data approaches the end of the data presented from the previous call in the repeating group. I’m going for the “infinite scroll”. I have tried front end and backend workflows with the standard API call and then passing the cursor data to a second call but haven’t had any luck. I cannot get it to load anything after the initial 35. I have done an intensive search and found others with this issue but no results that solved it specifically. Its possible my verbiage or the questions I’m asking are not specific enough but any help would be greatly appreciated. Thank you!
You could have a backend workflow that you call as if it was an external API, have that workflow recursively “collect” the data 35 items at a time (on each loop it would pass on the cursor for the next call and have the condition that it only loops when the HasMore is true), then when that HasMore is false it returns the entire list back to your client.
I can go into more detail if that sounds good to you, just now it won’t be instant because first it needs to call your app, then loop a few times and return back. Then your client will probably download all 100+ results at once…
The infinite scrolling I have no idea, I searched that on the forum but I didn’t see much about seamlessly looping back to the top of the list.
@tylerboodman thank you very much for the info. Yes, I would absolutely like some more details on the specifics of setting that up. I have tried that method before and not had any success. I’m new so I’m sure it was something I missed. Its strange for something that is used so often on nearly all major social media sites that there is so little info. Thanks and I look forward to checking out any details you can share.
Here is a short video of what I am trying to replicate…
This is going to be a stretch but do you want to DM me the editor link with edit access and I can try to assemble what I described
There might be a way to do it client-side so it is faster
The infinite scrolling I’m going to need to think of that one…
I appreciate that.
For anyone reading this, we came up with this solution:
Install this plugin to get the scroll position of the RG: Scroll Actions (Scroll Position) Plugin | Bubble, follow those instructions like putting the element on screen and settings the RG id, etc.
Set up a custom state for the current Cursor position, and a list field to store the entire list of videos.
Have a “When condition is true” event trigger based off of the scroll position being below the threshold you want (The max pixels minus the current pixels)
In @jed 's case the API returns the current cursor position so you can make a call later and “continue the search” from where the last one was. So save the cursor in the custom state, and merge the current list of videos with the new list.
Then the RG just needs the point to the Videos list custom state (check the box to display all results immediately since they are coming in chunks anyways)
if you need to make some kind of infinite loop so the feed never ends
In this case the API returns a yes/no if there are more results or not, and if the cursor is empty it will start over the search again, so there are some addition steps to do another API call with empty cursor
Huge “thank you” to @tylerboodman I really appreciate the help!
This is excellent. Very helpful. Thank you for taking your time. I learned a lot from this.
Wow, you’re getting very fast with this stuff @tylerboodman. It’s almost as if one can build real software in Bubble, isn’t it?