The demo code return a type error

[wxhohomsy]

Hello guys, I copy and paste the demo code

import { useState } from 'react';
import type { RuleGroupType } from 'react-querybuilder';
import { QueryBuilder } from 'react-querybuilder';
import { fields } from './fields';
import 'react-querybuilder/dist/query-builder.scss';
import './styles.scss';

const initialQuery: RuleGroupType = { combinator: 'and', rules: [] };

export const App = () => {
    const [query, setQuery] = useState(initialQuery);

    return (
        <QueryBuilder
            fields={fields}
            query={query}
            onQueryChange={setQuery}
            controlClassnames={{ queryBuilder: 'queryBuilder-branches' }}
        />
    );
};

But it throw type error at onQueryChange={setQuery}

TS2322: Type Dispatch<SetStateAction<RuleGroupType>> is not assignable to type
(query: RuleGroupType<RuleType<string, string, any, string>, string> | RuleGroupTypeIC<RuleType<string, string, any, string>, string>) => void
Types of parameters value and query are incompatible.
Type 'RuleGroupType<RuleType<string, string, any, string>, string> | RuleGroupTypeIC<RuleType<string, string, any, string>, string>' is not assignable to type 'SetStateAction<RuleGroupType>'.
Type
RuleGroupTypeIC<RuleType<string, string, any, string>, string>
is not assignable to type SetStateAction<RuleGroupType>
Type
RuleGroupTypeIC<RuleType<string, string, any, string>, string>
is not assignable to type RuleGroupType
Property 'combinator' is missing in type 'RuleGroupTypeIC<RuleType<string, string, any, string>, string>' but required in type '{ combinator: string; rules: RuleGroupArray<RuleGroupType<RuleType<string, string, any, string>, string>, RuleType<string, string, any, string>>; not?: boolean | undefined; }'.
react-querybuilder.d.mts(20, 5): combinator is declared here.
react-querybuilder.d.mts(684, 5): The expected type comes from property onQueryChange which is declared here on type
IntrinsicAttributes & QueryBuilderProps<RuleGroupType<RuleType<string, string, any, string>, string> | RuleGroupTypeIC<RuleType<string, string, any, string>, string>>

How should I give correct type

[jakeboone02]

This code only satisfies TypeScript in v7, of which there is an alpha release v7.0.0-alpha.2. (Alpha 3 should be released tomorrow.)

To get around the type issue in v6, you have to be explicit about how you call the state setter method:

// Instead of
onQueryChange={setQuery}

// Use
onQueryChange={q => setQuery(q)}

[wxhohomsy]

Thanks, I use v7 and it indeed works 😃