ClientSide Callbacks Promise Handling

[jmSfernandes]

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...

[chriddyp]

@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.

• Issue-1213 clientside callback_context Initial Commit #1240
• Inline clientside callbacks #967
• Clientside prevent update #964

[Michael-fore]

If there was some guidances here i would be interested at taking a stab at implementing this.

[alexcjohnson]

@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_context is handled with async clientside callbacks. This may just be documentation: "if you need callback_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]

@alexcjohnson thanks for the quick and informative clarification!

[MartinHanewald]

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