fix(query-builder): refactor the components#1087
Merged
Merged
Conversation
There was a problem hiding this comment.
Pull request overview
Refactors the Query Builder interaction samples from class-based React components to functional components using hooks, while keeping the existing Ignite UI Query Builder setup and behavior.
Changes:
- Converted the
Samplecomponents to functional components withuseRefanduseEffectlifecycle equivalents. - Moved static configuration (entities/fields/options and template builders) out of component instances into module-level constants/functions.
- Rewired
expressionTreeChangehandling and initial setup/teardown to use effect cleanup.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 7 comments.
| File | Description |
|---|---|
| samples/interactions/query-builder/template/src/index.tsx | Converts the template sample to hooks, extracts field/options/template helpers, and sets up Query Builder event handling via useEffect. |
| samples/interactions/query-builder/overview/src/index.tsx | Converts the overview + grid sample to hooks, extracts entities/fields, and fetches data on expressionTreeChange with effect-based setup/cleanup. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
16 tasks
IMinchev64
requested changes
Jul 8, 2026
IMinchev64
requested changes
Jul 8, 2026
IMinchev64
requested changes
Jul 8, 2026
IMinchev64
left a comment
IMinchev64
left a comment
Contributor
There was a problem hiding this comment.
Hmm, weird. I still notice strange behavior with the default input field. I thought changing the input event to the correct onInput would resolve it but I was wrong.
See attached video of the behavior:
query-builder-react.mp4
IMinchev64
requested changes
Jul 9, 2026
IMinchev64
left a comment
IMinchev64
left a comment
Contributor
There was a problem hiding this comment.
It seems that similar to IgrInput in buildDefaultInput the following components also use sender.vlaue which is undefined and needs to be changed to sender.detail:
IgrSelectIgrDatePickerIgrDateTimeInput
…thub.com/IgniteUI/igniteui-react-examples into hhristov/fix-query-builder-react-samples
IMinchev64
requested changes
Jul 9, 2026
IMinchev64
approved these changes
Jul 9, 2026
IMinchev64
added
status: verified
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Refactor the query builder samples to use functional components