Controlling When an External API Call Runs

I have an external API that I am calling using the API Connector. That API is pulling a list of Recipes based on a set of ingredients that the User defines. Then I display those recipes in a Repeating Group on the page. The User can then filter and search that repeating group.

The problem I have is that there are a series of other actions that happen on the page that alter the bubble database and then appear to recall the API automatically. Even if that data is not related to API itself, any type of “reloading” of the page seems to recall the API.

I want to control when the API is called.

I tried storing the data in the Bubble database, so then I could control it. But for the amount of data I have, its a long process and really messes with the UX. Even if I do it in a backend workflow

I also tried calling the API in a ListShifter element and then hiding and unhiding that (as well as the Repeating Group that displayed the ListShifter) on the page, hoping the API wouldn’t run if it was hidden. That didn’t work.

In an ideal world, I have a Repeating Group that is showing data from the last call of the external API, but that call is only refreshed when the user performs a specific action I define in a workflow.

Any thoughts?

Normally, Bubble doesn’t recall API if the call parameters doesn’t change. If this is refreshing. this is because you have something that modify the request.

You can load the API on page load, and store the result into a state. Use the state in RG Data Source

2 Likes

Fantastic! The custom state worked like a charge as a placeholder for the API data. Thank you so much!

1 Like