fix(ui): parse columns/queryByGroup from URL to stop escape accumulation#16902
Open
rodrigo-builtonveya wants to merge 1 commit into
Open
Conversation
`ListQueryProvider` writes `columns` and `queryByGroup` to the URL via `JSON.stringify(...)`, but the read path (`parseSearchParams` -> `sanitizeQuery`) left them as JSON strings instead of parsing them back into their canonical array/object form. So whenever the value being written originated from the URL (a string), `JSON.stringify` added another escape layer. On a list view this compounds on every refresh until the `columns` query param overflows the request size limit (414 URI Too Long) and the admin panel becomes inaccessible. `sanitizeQuery` now unwraps every accumulated `JSON.stringify` layer from `columns`/`queryByGroup` on read, so React state always holds the canonical shape and the existing `JSON.stringify` write is idempotent across URL round-trips. Unwrapping all layers (not just one) also heals URLs already corrupted by the prior behavior instead of leaving them in a broken fixed point. Consumers (e.g. `TableColumns`) already require `columns` to be a `string[]`. Fixes payloadcms#16659
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.
Fixes #16659
Problem
On a collection list view, the
columnsquery param accumulates an extraJSON.stringifyescape layer on every page refresh after a specific navigation sequence (toggle a column → open a doc → back → sort → refresh…). The escaping roughly doubles each refresh until the URL exceeds the request size limit (~14KB on Vercel) and the admin panel becomes inaccessible with414 URI Too Long.Root cause
The
columns/queryByGroupURL round-trip is asymmetric:ListQueryProvider(packages/ui/src/providers/ListQuery/index.tsx) serializes both viaJSON.stringify(newQuery.columns)on two paths (refineListData,syncPropsToURL).queryFromURL = sanitizeQuery(parseSearchParams(rawSearchParams))left them as JSON strings;sanitizeQuerynever parsed them back into their canonical array/object form.So whenever the value being written originated from the URL (a string),
JSON.stringify(string)adds another layer. Each refresh re-reads the string and re-stringifies → escaping compounds.(
transformColumnsToPreferenceson the server doesJSON.parsestrings, but the client state path did not — hence the asymmetry.)Fix
sanitizeQuerynow unwraps every accumulatedJSON.stringifylayer fromcolumns/queryByGroupon read, so React state always holds the canonical shape and the existingJSON.stringifywrite becomes idempotent across URL round-trips.Unwrapping all layers (not just one) also heals URLs already corrupted by the prior behavior, rather than leaving them in a broken fixed point. The fix lives at the single read boundary (
sanitizeQuery's only caller isListQueryProvider), so both write paths are covered. Consumers such asTableColumnsalready requirecolumnsto be astring[], so the read-side parse is the correct layer (a write-side guard that left a string in state would break them).Tests
Added
packages/ui/src/providers/ListQuery/sanitizeQuery.spec.ts:columnsarray /queryByGroupobject back from the URLwhere/columnsdrop)Verified red→green (the regression tests fail against the previous
sanitizeQuery), fulluiunit suite passes, andtsc/eslint/prettier are clean.