feat(FR-1683): migrate URL state management from use-query-params to nuqs for better React Transition support #4646
Conversation
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
github-actions
bot
added
area:ux
Member
Author
How to use the Graphite Merge QueueAdd either label to this PR to merge it via the merge queue:
You must have a Graphite account in order to use the merge queue. Sign up using this link. An organization admin has required the Graphite Merge Queue in this repository. Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue. This stack of pull requests is managed by Graphite. Learn more about stacking. |
yomybaby
force-pushed
the
feat/FR-1683-migrate-url-state-to-nuqs
branch
from
c3fe32d to
e8a4030
Compare
Coverage report for
|
St.❔ |
Category | Percentage | Covered / Total |
|---|---|---|---|
| 🔴 | Statements | 4.7% | 548/11648 |
| 🔴 | Branches | 3.81% | 314/8238 |
| 🔴 | Functions | 2.91% | 104/3570 |
| 🔴 | Lines | 4.65% | 530/11391 |
Test suite run success
125 tests passing in 14 suites.
Report generated by 🧪jest coverage report action from e9ef843
yomybaby
force-pushed
the
feat/FR-1683-migrate-url-state-to-nuqs
branch
from
e8a4030 to
fc160a3
Compare
Copilot finished reviewing on behalf of
yomybaby
November 17, 2025 06:23
Contributor
There was a problem hiding this comment.
Pull Request Overview
This PR migrates URL state management from use-query-params to nuqs for improved React Transition support. The migration is progressive: ComputeSessionListPage adopts the new nuqs library, while other components temporarily use a legacy hook (useBAIPaginationOptionStateOnSearchParamLegacy) to maintain existing functionality.
Key Changes:
- Integrated
nuqslibrary withNuqsAdapterwrapper in the App component - Migrated
ComputeSessionListPageto usenuqswith type-safe query parameter parsing - Added GraphQL
@catchdirective for error handling with new Result type utilities - Updated test infrastructure (Jest 30, related dependencies) to support the migration
Reviewed Changes
Copilot reviewed 42 out of 43 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
react/src/pages/ComputeSessionListPage.tsx |
Primary migration to nuqs with parseAsStringLiteral for type safety, added @catch error handling |
react/src/hooks/reactPaginationQueryOptions.tsx |
Created new nuqs-based hook and renamed old hook to "Legacy" |
react/src/helper/resultTypes.ts |
Added utility types and functions for GraphQL Result type handling |
react/src/App.tsx |
Wrapped app with NuqsAdapter for react-router v6 integration |
react/src/components/SessionNodes.tsx |
Exported sorter values array for type checking, improved sorter configuration |
react/src/RelayEnvironment.ts |
Added rawErrorMessage extraction for Relay 18.1.0+ compatibility |
react/package.json |
Added nuqs (2.7.3) and zod (4.1.12) dependencies, updated Jest dependencies |
react/jest.config.js |
Updated transformIgnorePatterns to include nuqs package |
resources/i18n/*.json |
Added "FailedToLoadTableData" error message across all 20 languages |
| Various component files | Migrated to legacy pagination hook to maintain compatibility during transition |
Files not reviewed (1)
- pnpm-lock.yaml: Language not supported
nowgnuesLee
requested changes
Nov 17, 2025
agatha197
approved these changes
Nov 18, 2025
5 tasks
yomybaby
force-pushed
the
feat/FR-1683-migrate-url-state-to-nuqs
branch
2 times, most recently
from
c53a420 to
097a609
Compare
Merge activity
|
…nuqs for better React Transition support (#4646) Resolves #4645 ([FR-1683](https://lablup.atlassian.net/browse/FR-1683)) ## Background Currently, the React application uses `use-query-params` for URL state management. However, this library has limitations when working with React's newer concurrent features, particularly React Transitions. As a result, users may experience delayed feedback when interacting with URL-driven state changes. ## Purpose Modernize URL state management by adopting `nuqs`, which is specifically designed to handle React Transitions effectively. This will provide: * **Faster user feedback**: Immediate visual responses during state transitions * **Better React Transition support**: Seamless integration with React's concurrent rendering * **Improved user experience**: More responsive UI with optimistic updates and proper loading states ## Key Changes * Migrated from `use-query-params` to `nuqs` across all React components * Replaced `QueryParamProvider` with `NuqsAdapter` in providers * Updated pagination hooks to use `nuqs` API (`useQueryStates`, `parseAsInteger`) * Created new helper utilities for GraphQL Result type handling * Maintained type safety with proper TypeScript types and zod schemas * Added legacy hooks for backward compatibility during migration ## Expected Outcomes * Users see immediate visual feedback when changing filters, tabs, or pagination * Smoother transitions between different views and states * URL state changes feel more responsive and aligned with modern web application standards * Better integration with React's concurrent features for future optimizations **Checklist:** - [ ] Documentation - [ ] Minimum required manager version - [ ] Specific setting for review - [ ] Minimum requirements to check during review - [x] Test case(s) to demonstrate the difference of before/after - Test URL state changes in session list page (filters, pagination, tabs) - Verify React Transitions feel more responsive - Check browser history navigation works correctly [FR-1683]: https://lablup.atlassian.net/browse/FR-1683?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ
graphite-app
bot
force-pushed
the
feat/FR-1683-migrate-url-state-to-nuqs
branch
from
097a609 to
e9ef843
Compare
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.
Resolves #4645 (FR-1683)
Background
Currently, the React application uses
use-query-paramsfor URL state management. However, this library has limitations when working with React's newer concurrent features, particularly React Transitions. As a result, users may experience delayed feedback when interacting with URL-driven state changes.Purpose
Modernize URL state management by adopting
nuqs, which is specifically designed to handle React Transitions effectively. This will provide:Key Changes
use-query-paramstonuqsacross all React componentsQueryParamProviderwithNuqsAdapterin providersnuqsAPI (useQueryStates,parseAsInteger)Expected Outcomes
Checklist: