# API Editor Query Parameters URL Auto-Update Fix
## Issue
When adding or editing query parameters in the API editor, the URL
wasn't automatically being updated to reflect these changes. This
creates a disconnect between the parameters in the Params tab and the
actual URL being used, as reported in issue #40045.
## Fix
Implemented proper synchronization between query parameters and the URL
in the API editor using a two-pronged approach:
1. **Component-level solution** with React hooks:
- Added a `useSyncParamsToPath` hook that handles bidirectional
synchronization
- Ensures sync happens on component mount and when values change
- Prevents update loops by checking if changes are needed
2. **Redux saga enhancement**:
- Enhanced `syncApiParamsSaga` to ensure the action model is updated
when params change
- Provides a failsafe at the data layer in addition to the UI layer
These changes ensure:
- When query parameters are modified in the Params tab, the URL now
updates automatically
- When the URL is modified with query parameters, they are correctly
extracted to the Params tab
- Synchronization happens proactively rather than just reactively
## Changes
- Added new React hook for bidirectional synchronization
- Updated `syncApiParamsSaga` to handle API action data updates
- Addressed potential edge cases like empty parameters and update loops
## Test Strategy
No new test cases were added for the following reasons:
- This fix primarily addresses UI synchronization between two components
- The fix is easily verified through manual testing
- The functionality is already covered by existing integration tests for
the API editor
- The changes are focused on visual state synchronization rather than
core business logic
- The bug is easily reproduced and fixed by the UI components working
together correctly
## Related Issue
Fixes#40045
## Automation
/ok-to-test tags="@tag.Datasource"
### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results -->
> [!TIP]
> 🟢🟢🟢 All cypress tests have passed! 🎉🎉🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/14332565088>
> Commit: 6de39d58842493a4eb514278a7c6e8dc458dc635
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=14332565088&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Datasource`
> Spec:
> <hr>Tue, 08 Apr 2025 12:29:38 UTC
<!-- end of auto-generated comment: Cypress test results -->
## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [x] No
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Improved synchronization between URL parameters and form inputs,
ensuring real-time, consistent updates during user interactions.
- Enhanced the API configuration interface by automatically reflecting
changes to action parameters for a smoother experience.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Aman Agarwal <aman@appsmith.com>
abc9c71c3d