API Connector: Shared API Models between API Calls

Idea
1

Shared API models in API Connector

Hello everyone,

Something that has been on my mind for some time is adding the possibility of having shared API Models between calls to the API Connector. I see several advantages in this:

  • Reduced number of API ‘returned values’ definitions in editor
  • Reduced number of API definitions in the app’s dynamic.js, thus improved loading times
  • Improved maintainability when working with API responses in bubble editor
  • Reduced number of API calls, decreasing the workload on bubble server

To elaborate, imagine we are using an object called “EventPattern” in our bubble app, which is a result of a ‘Get EventPattern’ GET API call. It represents a calendar appointment with a start date and end date.

Get EventPattern

{
    "results": [
        {
            "id": "1668166870942x406523877151182500",
            "start": 1676347200000,
            "end": 1676347200000
        }
    ]
}

This ‘EventPattern’ may be changed by the user. For example the user may decide to change the start time of the appointment. To save the changes, the user performs a POST or PUT API Call.

Now, in order to update the UI properly and reflect changes, we need the updated object from our API connector. This means another GET API call. But what if the backend responded to our POST/PUT call with the updated object immediately, thus eliminating the need for another GET call? Well bad luck, because we are using ‘Get EventPattern’ in bubble, we can’t use the response data from our POST/PUT API call, even though it is in the exact the same format.

To sum things up, the current process looks something like this:

  1. User gets data from API Connector using a GET API call
  2. User updates data in the UI
  3. User presses “Save” and saves data using a POST/PUT API Call
  4. Backend responses to POST/PUT with the updated object
  5. As we can not use the response object, we need to perform another GET API Call

So how could we indicate to bubble that the response from our POST/PUT API call is the same as from a GET API call? It could look something like this:

bubble_api_conn_mockup
bubble_api_conn_mockup856×1052 62.3 KB

Because we define the response to the POST/PUT API call as being the same as to a GET call, we can use the responses from either API call to populate Groups or bubble elements that have ‘Type of content’ set to ‘Get EventPattern’.

I currently do not have any statistics about how many bubble users use API connector, so this might be a very niche request.

Please feel free to add anything to this post if you have any other ideas on improving API Connector or generally think this might be a good idea.

2

I had the same objective in mind for a little while and since I’m using Xano, I managed to set this up the way I wanted… Could work with other API/db services but would be a little more complicated for “pre-built” apis.

What I did : Xano lets you decide what to send back with your API request… So, I build a single “CRUD” endpoint… Added a filed “crud_action” where I can specify (create, read, update, delete)… My data type is setup all around my app for this CRUD endpoint. So i can now do any action, the response is a direct update to my data (no need to do POST/PUT then GET) it’s all a single POST endpoint that always updates my data in a single call.

The other way to do it with other services in my opinion, would be to build an extra API connector in Bubble where you could send all your responses to internaly to parse your responses…

Original API call → Display data in group/repeating group from (API connector (parser) “Result of step 1”)