Allow serialize functions to operate on ReadOnlyUrlSearchParams from useSearchParams

[neefrehman]

We often have a need to create href's to update search params, without affecting any other current params on the page. For example, one link might open a modal, but we want to preserve the underlying pagination state of a table.

To do this, it feels most ergonomic to pass in the response from useSearchParams as the base parameter:

// We don't want to define pagination state here as it is not necessarily a concern of the current component
const serializer = createSerializer({ objectToOpenInModal: parseAsString })

...

const currentSearchParams = useSearchParams()

...

<Link href={serializer(currentSearchParams, { objectToOpenInModal: id })}>Open modal</Link>

But, this doesn't work and gives the following Next.js error: Method unavailable on ReadonlyURLSearchParams. To get around it we do the following:

<Link href={serializer(new URLSearchParams(currentSearchParams), { objectToOpenInModal: id })}>Open modal</Link>

But this feels like a bit too much boilerplate for a library that is deeply integrated with Next, so I wonder if it should be something that the serializer's implementation could be responsible for?

[franky47]

That's a good idea!

Regarding the "tight integration with Next.js", as an FYI this is kind of going away with the upcoming Adapters feature in #644.

That being said, it looks like the error could be solved by working on a copy of the base input rather than trying to mutate it directly if it's an instance of URLSearchParams (which ReadonlyURLSearchParams is, as a derived class). Essentially moving your solution into the serializer itself. This also applies for passing a URL instance as the base, which will get mutated.

nuqs/packages/nuqs/src/serializer.ts

Lines 73 to 75 in 1049f96

	return ['', base] as const
	} else {
	return [base.origin + base.pathname, base.searchParams] as const

Would you like to open a PR?

[neefrehman]

Thanks for the pointer! I've just opened a PR in #647