Background callback polling request sends all callback inputs, states, outputs each time

[andredfb]

Describe your context
As far as I can tell this is a general issue I have reproduced it in Jupyterlab with Diskcache and also in a separately served app with Gunicorn and Celery.

dash                      2.18.2
dash_ag_grid              31.2.0
dash-core-components      2.0.0
dash-html-components      2.0.0
dash-table                5.0.0

Describe the bug

When a dash background callback is executed there is one initial request which sends all of the related inputs and states to the server and then a series of polling requests that contain the caheKey identifying the background callback until it has completed. Looking at the request being sent, I think it is sending all of the callback data with each polling request instead of just sending it once with the first request and then using only the cacheKey on subsequent requests.

The impact of this behaviour is that if there is a lot of input data the polling is very slow (for example uploading with dcc.Upload and then running a longer processing and saving in a background callback). Since the polling interval gets long due to all the uploading, progress and set_props updates can be missed entirely.

Expected behavior

It would be preferable to make the polling as fast as possible by dropping all of the callback inputs/states and just using the cacheKey to identify it.

[BSd3v]

Hello,

I have a suggestion for a straightforward fix for these lines: https://github.com/plotly/dash/blob/7ba267bf9e1c956816f76900bbdbcf85dbf3ff6d/dash/dash-renderer/src/actions/callbacks.ts#L439C1-L470C7

We could use this instead which would limit the rewriting of callback handling (context, etc):

const fetchCallback = () => {
        const headers = getCSRFHeader() as any;
        let url = `${urlBase(config)}_dash-update-component`;
        let new_body = body

        const addArg = (name: string, value: string) => {
            let delim = '?';
            if (url.includes('?')) {
                delim = '&';
            }
            url = `${url}${delim}${name}=${value}`;
        };
        if (cacheKey || job) {
            if (cacheKey) addArg('cacheKey', cacheKey);
            if (job) addArg('job', job);

            // clear inputs as background callback doesnt need inputs, just verify for context
            let tmp_body = JSON.parse(new_body)
            for (let i = 0; i < tmp_body.inputs.length; i++) {
                tmp_body.inputs[i]['value'] = null;
            }
            for (let i = 0; i < tmp_body?.state.length; i++) {
                tmp_body.state[i]['value'] = null;
            }
            new_body = JSON.stringify(tmp_body)
        }

        if (moreArgs) {
            moreArgs.forEach(([key, value]) => addArg(key, value));
            moreArgs = moreArgs.filter(([_, __, single]) => !single);
        }

        return fetch(
            url,
            mergeDeepRight(config.fetch, {
                method: 'POST',
                headers,
                body: new_body,
            })
        );
    };

Essentially, we just clear the values from the payload if there is a job or cacheKey.