[New Feature] Make API call directly in the browser, if possible

[gerry98]

Hi all, writing this post to let you know about a new feature on API Connector currently being rolled out.

Edit: It seems like the feature is currently broken for some APIs (but not all). I am actively working on this and be sure to test before turning on this feature on your live apps.

Edit 2: The issues should now be fixed.

Edit 3: You may need to re-create any API Calls you wish to use this feature on

Some API calls can be now made directly from the browser running the app, without having to go through Bubble. Checking this box will result in Bubble apps trying to do that when possible. Note that if the API or API call configuration have any headers, non-private parameters, or shared headers/parameters, the checkbox will disappear, since any such call cannot be done from the browser.

The motivation for this is that sometimes it is unnecessary for API Calls to go through Bubble and it is more efficient for them to be made from the user’s browser directly. Additionally, some APIs have limits on the number of calls a single IP address can make, and if all API calls with such limits go through Bubble we can end up reaching that limit very quickly. It’s as if all apps “shared” the same limit. With this feature, this should no longer happen, and each user’s browser should have its own limit.

Some examples of API calls that wont be made from the browser: API Calls that happen in Actions, API calls that happen from the editor (e.g. call to initialize the API Call). Anything requiring headers or authentication.

Feel free to ask any questions and to let me know if you spot any bugs.
Cheers,

[ZubairLK]

After just reading the title, I thought it was making a phone call… now this makes more sense!

Nice! Technically if a user is in a static office/ip, can enforce some levels of security…

[renatoasse]

Nice, very nice.
I was having this trouble with the IP Limit in some services.
This will solve it.

Way to go, Bubble

[tecnologia]

Good news.

[boston85719]

@ZubairLK

After just reading the title, I thought it was making a phone call

Me too…Should be title Make API Call Directly in Browser

[renatoasse]

@gerry98 ,

I’m trying to test it on Ipify:

But it still returns my Bubble IP:

Shouldn’t it return my own IP?

[gerry98]

Thanks for reporting this. I am not sure. Will take a look and will get back to you ASAP

[gerry98]

What do you have set for Authentication method?

[AliFarahat]

WOW, what a nice surprise. Thanks guys

[renatoasse]

@gerry98,

None or self-handled:

[vini_brito]

@gerry98 Awesome!
Are these calls logged somehow?

[ryanck]

Hello,

Can anyone explain what´s the difference with a regular API call in a real world? Like a use case or something?

I cannot figure out the difference and why sometimes it would be best to use this API call from the browser instead of the regular one.

Thanks a lot.

[nocodeventure]

Similar to browser extensions, the call is executed on the client side. Reducing workload on the server. You don’t want to have 800,000 people using server-side actions all at once

[ryanck]

Oh I see, so instead of relying on Bubble´s performance you´re relying on the user´s computer performance.

Understood.

Thanks a lot @nocodeventure

[vini_brito]

@gerry98 Also, are any kind of headers forbidden? Why?
It seems that we can only use URL and body and nothing else, is this correct?

[nocodeventure]

Come on Vini, we’re not going to run an HTTP server from the client’s browser. You want to do some headless scripting or scraping?

User-Agent: Vini

[vini_brito]

Hahahahah nooo!
Mainly due to some API’s requiring authentication and/or other information in the headers.

But honestly, I confess that I already dedicated a long research time to see if I could start a web server in a browser so you got me on this one!

[simon7]

Really nice. I have been writing a lot of custom plugins to fetch data from the front end because the api connector is often too slow. The main course for this has been that the api connector requires the request make a round trip from Denmark to the bubble/aws server in us-east where a lambda (I guess) is invoked to fetch data. This causes a lot of latency, so hopefully this new feature will make calls much faster for non-us users!

[simon7]

@gerry98 why no headers? People shouldn’t use static tokens or stuff like that client side, but there can be other use cases where headers are needed

[jjj230]

Whenever I turn on “Make the call directly in the browser, if possible” for an existing api call it seems to break my site. Trying to load a page with the that uses the api gives displays this

Unchecking “Make the call directly in the browser, if possible” fixes the issue.

Does this feature not work if enabled for existing api calls?