Do API Call from Browser costing a lot of WUs

bensonlangley · 2024-07-08T00:43:29.338Z

Hi everyone, I need a little help to figure out how to reduce workload consumption. I make a call from the API connector and have “Attempt to make call from browser” checked. I have verified that the call is indeed made from the browser so it should be bypassing bubble completely.

However, when checking my App metrics > Workload by Activity that API call shows up as the action that consumes the most workload under Fetching Data > Search. In the screenshot below, it is the teal section in the pie chart.

Why is this costing me WUs, especially under the activity Fetching Data > Search, considering this is an API call made from the browser and is done all client side?

Jici · 2024-07-08T00:59:44.892Z

Search is not API call. What do you get if you continue to click on the search?
Even fetching data itself is not API. Fetching data are related to Bubble DB. If you go to overall, you should see External API request for all the API request

bensonlangley · 2024-07-08T04:00:42.719Z

The image I posted was after I clicked on Search, and the teal section of the pie chart represents the API call. Yes, I didn’t think API call should be listed there. The only thing I can think of is that I have that one API call set as the data source for the element on the page.

When I check External API request I don’t see the one in question listed in there, and overall, External API request is using a tiny fraction of my WU compared to all the others.

GH5T · 2024-07-08T04:11:19.631Z

Hi @bensonlangley.

What I do is whenever I “Do a Search for” something, I attach it to a reusable component that is on all my pages. Inside this element I can set states, and the data consistantly throughout my app.

This is easily accomplished by sending your state (your API data you fetched prior) to your other reusable elements throughout your application, therefor the data only needs to be fetched once on page load (or setup a flag to update the data on an interval).

This will prevent you from searching for a data-type more than once, and can scope easily from your source from anywhere.

Page

[Reusable] HEADER (A state inside here is where your data lies)
Content
– [Reusable] Page (takes a prop for any data type) - Set it to the headers state.

Hope this gives you more insight on WU optimization.

Jici:

Search is not API call

Are you sure? Pretty sure it’s a fetch still (technically).

ihsanzainal84 · 2024-07-08T12:15:18.198Z

Yep. Technically yes but in the WU chart a Search apply to searches in a Bubble expression.

@bensonlangley Hovering over the charts or clicking on the individual parts will show you the actual expression involved

Jici · 2024-07-08T13:30:47.117Z

@GH5T Sure… almost. With Bubble… there’s always surprise but:

screenshot-bubble.io-2024.07.08-09_20_051190×399 18 KB

If you click on Fetching DATA, you will find a second layer of data that will show Bubble DB fetching data like Search, Aggregate, Groupby, Individual data request, realtime search and autobinding. Clicking one more time on them will bring you to the expression itself. Clicking on the expression will open the editor where you find this expression.

If you click on API you will find mostly two types: Workflow or Data. Clicking WF will open a new level wher you will see each item actions and clicking again will send you to the Backend WF. For data, it will just open the DB related to this Data.

Finally External API request will directly open the chart level where you can see all API Call. But seem to only display DATA type call. Not action. I guess that actions will be find in workflows or in Backend WF section.

@bensonlangley If you don’t find the API call performed in Browser, this si probably because it’s doesn’t consume WU.

bonjour_17 · 2024-07-08T14:13:36.421Z

About using elements as anchors for searches in order to not have multiple time the same search: I also do the same however according to Bubble’s documentation, they should already take care of this in their own app optimisation.

Doc : Performance | Bubble Docs

If a page has the same search in more than one place, Bubble will automatically combine them to run the query once

One day I’d love to take the time to dig this and make some performances comparissons and reserches.

bensonlangley · 2024-07-08T14:34:35.952Z

Yea and when I click on it, it takes me the the API call I’m making.

Jici · 2024-07-08T14:44:14.160Z

Can you share screencast and screenshot of your settings?

boston85719 · 2024-07-08T16:15:27.430Z

GH5T:

What I do is whenever I “Do a Search for” something, I attach it to a reusable component that is on all my pages. Inside this element I can set states, and the data consistantly throughout my app.

This is for an SPA correct?

GH5T · 2024-07-08T17:37:59.092Z

boston85719:

This is for an SPA correct?

It can be. My app I’m currently working on is not really a SPA, it has other pages with the header attaches on it and I use the same data source from that element on all my pages.

bonjour_17:

About using elements as anchors for searches in order to not have multiple time the same search: I also do the same however according to Bubble’s documentation, they should already take care of this in their own app optimisation.

I just don’t see this actually happening when I look at the logs. The data get called more than once.

ihsanzainal84 · 2024-07-08T23:08:42.467Z

Best if you could share a screenshot of the expression.

bensonlangley · 2024-07-09T01:20:56.507Z

@Jici & @ihsanzainal84

Here is an screenshot with explanation of what I’m looking at and clicking on.

Bubble io forum post1481×1135 129 KB

GH5T · 2024-07-09T01:31:00.531Z

Think this really depends on how your application behaves. If it has multiple page loads, then is it fetching that data again?

The API calls always reload on page load.

ihsanzainal84 · 2024-07-09T02:00:04.073Z

Your parameters are retrieving data from DB objects and that’s most where the Search costs are coming from.

Those don’t cost much as they are referring to the current page object and User. If you believe that it’s costing too much WU, the frequency of the call is most likely why it is blowing up. As also hinted by @GH5T.

Things you can look out for:

Is the element in question in a repeating group?
Is there any WF that is causing it to make the call repeatedly?
Are you making any additional Search calls in your :formatted as text expressions?

GH5T · 2024-07-09T02:04:23.722Z

Really surprised Bubble hasn’t introduced any Redis based functionality. It’s streamlined on all major applications. I use it on my own applications. KV storage is so powerful. But hey, guess they want to keep overcharging us for not caching data that should be cached. Tree has to get water somehow I guess.

A suggestion would be to cache the data yourself. I use my Toolkit plugin to use cookies and local storage. These help me add data into the user’s machine that isn’t secure nor intended to be. Things like blog posts, updates, notifications, etc., can all be cached on the user’s machine. You’d want to create some additional logic to update that cached data, and enforce it when necessary. This solution will prevent API calls being made, and it even renders/loads data much faster. Though, it’s somewhat tedious to set up, it’s very efficient.

boston85719 · 2024-07-09T07:43:18.117Z

GH5T:

It can be. My app I’m currently working on is not really a SPA, it has other pages with the header attaches on it and I use the same data source from that element on all my pages.

So if I have a reusable header and I put onto it a custom state that is a list of things, and from Page A I set the custom state of that list of things on the reusable header, that when my user navigates to Page B or Page C, whereby the page is loaded, that the values in the custom state on the header set from Page A are still set on the header that is visible on Page B or Page C without needing to run a set state action and that there would be no need to refetch those values from the database again, implying the values carry over from the reusable on Page A to the reusable on Page B or Page C?

I was always under the impression that each iteration/use of a reusable is materially different from another, as we can use the same reusable element more than once on the same page and have the ability to set different values to the custom states for each of those. And I was also under the impression that when a page is loaded all custom states set are lost and would need to be set again.

I’m very intrigued by the concept you outlined, but feel as if I am lacking clarity on how it is implemented.

GH5T:

These help me add data into the user’s machine that isn’t secure nor intended to be. Things like blog posts, updates, notifications, etc., can all be cached on the user’s machine.

I’ve only recently began utilizing local storage in apps and really like what it can do, especially for remembering who a non-logged in user is.

When you use it for things like blog posts, are you saving to local storage the blog posts as JSON? I’m curious how to make use of this in an app.

GH5T · 2024-07-09T14:25:38.305Z

boston85719:

So if I have a reusable header and I put onto it a custom state that is a list of things, and from Page A I set the custom state of that list of things on the reusable header, that when my user navigates to Page B or Page C, whereby the page is loaded, that the values in the custom state on the header set from Page A are still set on the header that is visible on Page B or Page C without needing to run a set state action and that there would be no need to refetch those values from the database again, implying the values carry over from the reusable on Page A to the reusable on Page B or Page C?

Yes. As long ad the element is on the page, it should have a unanimous connection. As long as you’re not fully reloading the page, it should work and behave as expected. For my example I have 1 Merchant search being used throughout my entire application with one call, feeding to all my inner elements that require that information.

boston85719:

When you use it for things like blog posts, are you saving to local storage the blog posts as JSON? I’m curious how to make use of this in an app.

JSON object inside an array, pretty simple. With localstorage you’re able to modify any key/value. However, you are limited to the amount of data you can store (5mb per web app - which could be throttled by user not automatically, so not recommended for any big data).

The freeCodeCamp Forum – 18 Jul 20

How to update an array from localStorage

JavaScript

Hi Skaparate thanks for yout help 🙂 yeah I’m doing a id’s update in my Li items when the page is loaded but this is no happening in my array from localstorage for instance I can have something like this : text1 text2 text3 in my...

bensonlangley · 2024-07-12T14:12:45.723Z

If it’s just using Current Page and Current User data, aren’t those downloaded on Page load? Why is it doing a search for that data?

ihsanzainal84 · 2024-07-12T16:24:03.480Z

Sorry for not being more precise. The User’s geolocation is definitely costing some WU.

On top of that I just realized that that’s an API call you have as a Data Source. That’s most likely costing the bulk of the WU cost.

Do you have any nested searches in your :formatted as text expressions?