Repository navigation
ClientSide Callbacks Promise Handling #1364
Description
It would be a nice funcionallity to be able to return promises in the clientside callbacks.
Right now it is impossible to make web requests in the clientside.
This would help to take some load from the server side, which would greatly improve the dash apps performance
Example of what I mean:
async function MakeWebRequest(type) {
var _url = "https://test.api.com/entities/?type="+type
var headers = {
"Accept":"application/json"
}
var config = {
url: _url,
headers: headers,
method: 'get'
}
return await axios(config)
.then(data => {
return data
})
.catch(error => {
console.log(error);
return error;
});
}
async function updateDropdown(name, path, previous_value) {
var disabled = false
...
if (courseID !== '') {
var options = await MakeWebRequest("course");
return [disabled,courseID, options]
}
}
window.dash_clientside = Object.assign({}, window.dash_clientside, {
newQuestionnaire: {
updateDropdown: async function (name, path, previous_value) {
return await updateDropdown(name, path, previous_value);
}
}
This raises this type of error in the Web Page:
I think this should be a feature to really consider in future releases.
I really like how dash lets you abstract from javascript, But it is still lacking the the ability to offload demanding jobs to the clientside...
Reacted by Martin Hanewald
Activity
chriddyp commentedon Aug 26, 2020
@jmSfernandes - This is a great idea! Would you be interested in making this change as a pull request to Dash? Several of our recent clientside callbacks features have been written by community members. See e.g.
Michael-fore commentedon Apr 12, 2021
If there was some guidances here i would be interested at taking a stab at implementing this.
alexcjohnson commentedon Apr 12, 2021
@Michael-fore the PRs @chriddyp linked above point to most of the relevant code, but for clarity: the file src/actions/callbacks.ts is where all of this takes place. handleClientside executes clientside callbacks and currently prohibits promises here whereas handleServerside always returns a promise because it involves a network request. The block that calls these functions would need to add an async case for clientside that looks like the serverside version, depending on the return value of the clientside function.
We'll have to be careful how
callback_contextis handled with async clientside callbacks. This may just be documentation: "if you needcallback_context, always read it during the synchronous portion of your callback, because it will be deleted after callback invocation and a different one may be created if another callback is fired at the same time" or there may be more to it than that.Michael-fore commentedon Apr 12, 2021
@alexcjohnson thanks for the quick and informative clarification!
MartinHanewald commentedon Oct 25, 2021
I second this feature request. My usecase involves having to call an API clientside due to data privacy restrictions. The backend is not allowed to see certain types of data.
I found a workaround using synchronous requests using XMLHttpRequest, but this will not be feasible on a large application:
https://community.plotly.com/t/client-side-data-from-external-source/41118/9