Dev Space

Customize & extend the power of Alteryx. SDKs, APIs, custom tools, and more!

AYX UI SDK React Comms - handleUpdateModel Callback

5 - Atom



We are developing a tool and the UI part of it is mainly responsible for building a nested json-object which represents a configuration-object that afterwards will be sent to our API.

We wrote a reducer for altering values in this json-object. This reducer receives the configuration and mainly copies it, except for the part that needs to be changed, for which a new configuration object is returned. To control which part needs to be updated we dispatch actions.


However, some user interactions cause multiple such actions to be dispatched. In this situation, the problem arises that "handleUpdateModel" (named as in the documentation) works asynchronously, so only the update from the last dispatched action persists.


We expected that behind the scenes the Context of '@alteryx/react-comms' uses the 'useState'-hook for this "handleUpdateModel" function. Therefore, we tried passing it a callback giving access to latest model in the Alteryx state object, as shown in the code below.

const modelDispatch = (action: ReducerAction) => {
    handleUpdateModel((alteryxModel) => ({
      Configuration: {
        forecastConfiguration: modelReducer(
          alteryxModel.Configuration.forecastConfiguration ?? DEFAULT_FORECAST_CONFIGURATION,
        ui: uiReducer(alteryxModel.Configuration.ui ?? DEFAULT_UI_CONFIGURATION, action),

After trying this everything worked as expected, when multiple actions were dispatched the configuration was changed correctly.


Another issue arose here however: when leaving the tool, the following error message can be found in the 'Alteryx HTML Developer Tools': "Uncaught TypeError: Cannot convert undefined or null to object".


Screenshot 2021-10-08 at 17.25.31.png





This causes the state to be entirely lost; bringing us back to square one.


Any help would be appreciated!


Based on that error, I'd want to see exactly what the payload being sent to getConfiguration is. Have you console logged the last state of that config object before the tool attempts to persist and close? If so, and that doesn't shine a light on the problem, could you share that here? (Not sure if it contains sensitive info).

5 - Atom

The getConfiguration isn't of ours. It comes from 'app.js' which is produced by webpack (configuration as is after creating tool with ayx-plugin-cli) behind the scenes upon building the tool.


But here I have some logs of dispatched actions with their updated state (which is returned to the 'handleUpdateModel'):


Screenshot 2021-10-20 at 12.19.25.png