How to remove a rule programmatically?

[vk034]

Issue: Error While Using removeRule with Query Builder

Problem

I am using the react-awesome-query-builder package to build a query UI. I display all the applied rules as chips/badges in the UI. Each chip has a remove icon that, when clicked, calls the removeRule method with a path array (e.g., [GroupId, RuleId]) to remove the corresponding rule.

However, I encounter the following error when attempting to call removeRule:

Cannot read properties of undefined (reading 'getIn')
TypeError: Cannot read properties of undefined (reading 'getIn')
    at removeRule (http://localhost:3000/static/js/bundle.js:85429:22)
    at __webpack_modules__../node_modules/@react-awesome-query-

Relevant Code

Here is the relevant part of my implementation:

<Query
    {...state.config}
    value={state.tree}
    onChange={onChange}
    onInit={onChange}
    renderBuilder={renderBuilder}
/>

const onChange = useCallback(
    (
        immutableTree: ImmutableTree,
        config: Config,
        actionMeta?: ActionMeta,
        actions?: Actions
    ) => {
        console.log(actionMeta, actions); // Debugging
        stateRef.current.config = config;
        stateRef.current.tree = immutableTree;
        stateRef.current.actions = actions; // Save actions in ref
        setState({ tree: immutableTree, config: config });
    },
    []
);

const onRemoveFilters = (path: string[]) => {
    if (stateRef.current.actions) {
        stateRef.current.actions.removeRule(path); // Invoke removeRule
    }
};

Observations

1. I store the actions object in a useRef during the onInit callback.
2. The removeRule method is invoked from onRemoveFilters with a valid path.

Despite this, the error suggests an issue with accessing properties in removeRule.

Questions

1. Why does the removeRule method throw a getIn error?
2. Is there a potential issue with how I'm storing or using the actions object?
3. Are there specific constraints on how the path array should be structured for removeRule?
4. Is there a better way to manage and invoke actions like removeRule in this setup?

Debug Information

• Query Builder Library Version: "@react-awesome-query-builder/antd": "^6.6.4"
• React Version: ^18.2.0

Any help or suggestions would be greatly appreciated! Thank you in advance.

[ukrbublik]

calls the removeRule method with a path array (e.g., [GroupId, RuleId])

Please try adding root id (stateRef.current.tree.get("id")) as a first element of array.