Sync Bubble frontend with external db - refresh API data

[zach12]

I’m new to Bubble and I inherited a Bubble app that uses the built-in Bubble db in the usual way, and was asked to instead connect an external DynamoDB and use that as the app’s db.

As a first test, I was able to set an element’s data source to an API GET endpoint using the API Connector. All good there.

I was also able to use an input field to send a POST request to an API endpoint using the API Connector and update a piece of data. All good there.

The problem though is that the frontend then is still displaying the original data. I want to update that piece of data in the frontend immediately.

I’m guessing the ideal way to do this is to refresh the element’s data source (call to the API) to sync the front and backend.

In the movie database tutorial, they delete a movie then refresh the whole page in order to refresh the movie list. I understand that’s an option here but it’s really not a good UX and I want to avoid doing that on every form submit.

So my question is: is there a way to refresh/re-call the data source on the element to re-fetch the API data in order to sync the front end with the backend external db? I couldn’t figure out how to refresh that call.

Is there a way to use the “action” type of API Connector call to do that refresh somehow?

I know this is not a common pattern/use of Bubble, but this is what I was given, so hopefully there’s a better way to do this besides refreshing the page each time.

Any other ideas for how to approach this are welcome.

Thank you!

[senecadatabase]

I would try this workflow:

‘Display List’ Action: When you trigger an update in DynamoDB

Make Changes to a Thing: Modify a dummy ‘thing’ in your Bubble database

Display List: Target the element you want to refresh and set its data source to the same API call as before. This forces Bubble to re-execute the call and update the element’s data.

[zach12]

Thanks @senecadatabase but it looks like the target has to be a repeating group. The element I need to target is not a repeating group. I tried using a dummy repeating group to handle the data but that needs a list object returned from the API and that’s not what is being returned…

Thanks, but any other ideas?

[zach12]

I did find the answer. Here are the steps in my workflow:

• POST to update the data in the backend external db
• Call Element Actions > Group/Display Data
  
• Previously set up a header named cachebust in the API call, here set it to to the current date with a seconds format. This will force Bubble to call the API even if it thinks there is no new data (bust the cache).
  
  
• show a toast alert and you’re all set.