Skip to content

Commit 5d3b816

Browse files
authored
chore(ui): exports parseSearchParams (#10185)
As pointed out in #10164, parsing a `where` query from search params is not exactly straightforward. Internally we rely on the `qs` module for this, but it comes with a couple small nuances that are undocumented, like the need to stringify them and specify depth. To standardize this, we use a `parseSearchParams` utility internally that accepts the `URLSearchParams` object that the `useSearchParams()` hook returns from `next/navigation`. This PR exports that function for reuse and adds JSDocs accordingly. Usage looks something like this: ```tsx 'use client' import { useSearchParams } from 'next/navigation' import { parseSearchParams } from '@payloadcms/ui' function MyComponent() { const searchParams = useSearchParams() const parsedSearchParams = parseSearchParams(searchParams) } ```
1 parent a0d8131 commit 5d3b816

File tree

2 files changed

+14
-2
lines changed

2 files changed

+14
-2
lines changed

packages/ui/src/exports/client/index.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -288,13 +288,17 @@ export {
288288
type ListViewClientProps,
289289
type ListViewSlots,
290290
} from '../../views/List/index.js'
291+
291292
export type {
292293
ListComponentClientProps,
293294
ListComponentServerProps,
294295
ListPreferences,
295296
} from '../../views/List/types.js'
297+
296298
export type { ListHeaderProps } from '../../views/List/ListHeader/index.js'
297299

298300
export { DefaultEditView } from '../../views/Edit/index.js'
299301
export { SetDocumentStepNav } from '../../views/Edit/SetDocumentStepNav/index.js'
300302
export { SetDocumentTitle } from '../../views/Edit/SetDocumentTitle/index.js'
303+
304+
export { parseSearchParams } from '../../utilities/parseSearchParams.js'

packages/ui/src/utilities/parseSearchParams.ts

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,16 @@ import type { ReadonlyURLSearchParams } from 'next/navigation.js'
22

33
import * as qs from 'qs-esm'
44

5-
export function parseSearchParams(params: ReadonlyURLSearchParams): qs.ParsedQs {
6-
const search = params.toString()
5+
/**
6+
* A utility function to parse URLSearchParams into a ParsedQs object.
7+
* This function is a wrapper around the `qs` library.
8+
* In Next.js, the `useSearchParams()` hook from `next/navigation` returns a `URLSearchParams` object.
9+
* This function can be used to parse that object into a more usable format.
10+
* @param {ReadonlyURLSearchParams} searchParams - The URLSearchParams object to parse.
11+
* @returns {qs.ParsedQs} - The parsed query string object.
12+
*/
13+
export function parseSearchParams(searchParams: ReadonlyURLSearchParams): qs.ParsedQs {
14+
const search = searchParams.toString()
715

816
return qs.parse(search, {
917
depth: 10,

0 commit comments

Comments
 (0)