Get the query that is currently rendering

[instagibb]

Sorry if this is obvious but how do I get the query state of the currently rendering query in say a custom control component.

See https://codesandbox.io/p/sandbox/jsv6mw for an example.

In the example above I change the root combinator to "OR" then hit "Reset to default" button at the top. When the CustomCombinatorSelector is rendered the "query" state is still the previous state and so the root combinator is still "or" even though the reset should be making it "and".

I hope that I'm making sense here 😅

[jakeboone02]

I'm on mobile so haven't looked at the sandbox, but I think what you're looking for is the useQueryBuilderQuery hook.

Docs here: https://react-querybuilder.js.org/docs/utils/hooks

If you need to access the current query from an event handler, use props.schema.getQuery() instead.

[instagibb]

Thanks so much for the super fast reply. That appears to work but seemingly because it causes multiple renders?

Here is the original sandbox forked https://codesandbox.io/p/devbox/shy-paper-forked-x8dhvy?workspaceId=ws_JrcF8EVCzvR7uojfy1CSnt using the useQueryBuilderQuery or am I doing it wrong?

[jakeboone02]

I'm not sure where you're seeing multiple renders. When I change the combinator value of the subgroup, I see four logs to the console: two from the rerender of the top-level combinator selector and two from the subgroup combinator selector. Seems like a single render pass? Let me know if I'm missing something.

[instagibb]

I see the double render when using the "Reset to default" button which calls the setQuery I see console logs for a double pass?

So the steps I am following are:

1. change top level combinator to "OR"
2. hit "Reset to default" button (which would make the root combinator "AND")
3. expect the parentGroup.combinator to be "AND" and only one set of console.log (like when using the props.schema.getQuery())

I modified the sandbox slightly to try to show what I mean. The behaviour is as I expect when using the query builder and changing combinators... just not what I expect when "resetting" e.g calling setQuery

[jakeboone02]

Ok I see what you mean. That hook (among other things) works because RQB uses Redux internally to manage state. This works well when QueryBuilder is used as an uncontrolled component. If you use it as a controlled component—by updating the query prop—it will see that the new query prop is different from what's in the Redux store during the render due to the prop change and then dispatch an action to sync the Redux store with the prop, causing another render.

But really, two renders with the same props shouldn't cause any performance issues unless you have some separate, underlying issue.

[jakeboone02]

If you're satisfied, want to mark this as answered?

[instagibb]

Ok I see what you mean. That hook (among other things) works because RQB uses Redux internally to manage state. This works well when QueryBuilder is used as an uncontrolled component. If you use it as a controlled component—by updating the query prop—it will see that the new query prop is different from what's in the Redux store during the render due to the prop change and then dispatch an action to sync the Redux store with the prop, causing another render.

But really, two renders with the same props shouldn't cause any performance issues unless you have some separate, underlying issue.

Ah right that makes sense to me. I really just wanted to make sure I wasn't doing anything wrong with seeing that double render. Basically my requirement boiled down to always knowing what the parent combinator is when a new group is added/rendered either through using "+ Group" or when calling setQuery with any arbitrary query.

Using the hook I get the desired operation so I am happy with that. Thanks again for all your help