Async function for external data?

Dash Python
1

Hello,

My app fetches external api data based on an id read from pandas df.
This query takes time and blocks the whole rendering. Is it possible to make this call async, to render the rest of the page (data from the pandas df) and render the element in async fashion?

Data render on page load, not as a response to user action.

thanks!

2

An easy (not strictly async) way is to add a dcc.Interval() to the layout that fires just once after the page is loaded, which can then trigger a callback that fetches the data and renders the element.

1 Like
3

Hello @q123,

It is possible to do an async function, though a bit irritating.

Do you need the data to come to the backend server or can it come from the front end?

I use clientside fetch requests with async functions all the time, as long as the other server is setup to respond when coming from your domain, this isn’t an issue.

If you need this to come from the server, you could also setup a route in flask designed to send the request to their server for you and then bring back the response to your client via a flask response.

Either way, I’d make it so that your request is on demand and not in app startup.

Another thing you could use would be a background callback, this will allow it to just kick it off and ping the server for updates while running.

4

Hello @jinnyzor,

it is a call to an external api, so it can come from the client. I don’t have any experience with async in dash. Can you please point me to some clientside async fetch piece of code, which I can learn on?

And yes, the request is on demand.

Thanks a lot!

5

such an interesting approach, I will give it a try.

6

Hello @q123,

You can checkout here:

I demonstrate how you can create an async call to a server in flask.

As far as an async function on dash via clientside:

dash.clientside_callback(
""" async function (n) {
          data = await fetch(url)
          return data 
     }""",
...)