diff --git a/packages/nuqs/src/parsers.ts b/packages/nuqs/src/parsers.ts index 9a94681b2..7871c036e 100644 --- a/packages/nuqs/src/parsers.ts +++ b/packages/nuqs/src/parsers.ts @@ -14,8 +14,10 @@ export type Parser = { /** * Render the state value into a query string value. + * + * Return `null` to remove the query parameter from the URL. */ - serialize?: (value: T) => string + serialize?: (value: T) => string | null /** * Check if two state values are equal. @@ -94,7 +96,7 @@ export type ParserBuilder = Required> & * you can pass to one of the hooks, making its default value type safe. */ export function createParser( - parser: Require, 'parse' | 'serialize'> + parser: Require, 'parse'> ): ParserBuilder { function parseServerSideNullable(value: string | string[] | undefined) { if (typeof value === 'undefined') { @@ -117,6 +119,7 @@ export function createParser( return { eq: (a, b) => a === b, + serialize: String, ...parser, parseServerSide: parseServerSideNullable, withDefault(defaultValue) { @@ -401,12 +404,11 @@ export function parseAsArrayOf( }, serialize: values => values - .map(value => { - const str = itemParser.serialize - ? itemParser.serialize(value) - : String(value) - return str.replaceAll(separator, encodedSeparator) + .map(value => { + const str = (itemParser.serialize ?? String)(value) + return str?.replaceAll(separator, encodedSeparator) ?? null }) + .filter(value => value !== null) .join(separator), eq(a, b) { if (a === b) { diff --git a/packages/nuqs/src/serializer.ts b/packages/nuqs/src/serializer.ts index 272c05b18..099b1feca 100644 --- a/packages/nuqs/src/serializer.ts +++ b/packages/nuqs/src/serializer.ts @@ -63,7 +63,12 @@ export function createSerializer< ) { search.delete(urlKey) } else { - search.set(urlKey, parser.serialize(value)) + const serialized = parser.serialize(value) + if (serialized === null) { + search.delete(urlKey) + } else { + search.set(urlKey, serialized) + } } } return base + renderQueryString(search) diff --git a/packages/nuqs/src/update-queue.ts b/packages/nuqs/src/update-queue.ts index 12c6890df..f50ec7c7a 100644 --- a/packages/nuqs/src/update-queue.ts +++ b/packages/nuqs/src/update-queue.ts @@ -37,7 +37,7 @@ export function resetQueue() { export function enqueueQueryStringUpdate( key: string, value: Value | null, - serialize: (value: Value) => string, + serialize: (value: Value) => string | null, options: Pick< Options, 'history' | 'scroll' | 'shallow' | 'startTransition' | 'throttleMs'