Repository navigation
[Feature] useSearchParams support key only param #209
Description
Describe the bug
Currently, there is no way to set the query string to something like domain.tld?page=1&latest. solid-router should support key-only params as it is valid in the URI spec and there are legitimate use cases for them.
Your Example Website or App
https://github.com/solidjs/solid-router
Steps to Reproduce the Bug or Issue
Setting setSearchParams({ page: 1, latest: undefined }), setSearchParams({ page: 1, latest: null }) or setSearchParams({ page: 1, latest: "" }) completely removes the latest param resulting in ?page=1.
Expected behavior
setSearchParams({ page: 1, latest: null }) should result in ?page=1&latest and searchParams should be represented as { page: 1, latest: null }
Activity
ryansolid commentedon Dec 19, 2022
Yeah this is a good idea. Looking at the browser APIs they use an empty string. However since we aren't only passing strings and might want to differentiate from an empty string. I'd love to know if there is precedence here in other libraries.
fabiospampinato commentedon Mar 12, 2023
possibly
useSearchParamsshould just return something with the same API as aURLSearchParams, so everything works ~natively.xxmichas commentedon Jul 3, 2023
@ryansolid Next.js has a nice ReadonlyURLSearchParams.
I think
useSearchParamsshould return a similar object.Current implementation only returns the last value if there are multiple keys with the same name. (e.g.
?n=1&n=2will always only return "2")Implementing similar API to URLSearchParams would give developers a choice between URLSearchParams.get() and URLSearchParams.getAll().
also
Paramstype shouldn't assume a queryParam exists and instead should beParams = Record<string, string | undefined>.Thanks for an amazing framework!
zhengkyl commentedon Nov 28, 2023
I ran into this usecase and tried messing around for a solution. Just making
setSearchParamssupport key only params isn't too bad, except since URLSearchParams is used to store/merge params, empty string and bare params are equivalent. Its tempting to solve that and support other advanced usecases but then the scope becomes reimplementing URLSearchParams with extra features.It seems that nextjs and sveltekit both just give you a URLSearchParams object without a builtin way to set search params. Users just have to roll their own function to change the url.
vercel/next.js#47583
sveltejs/kit#969
I also ended rolling my own function with the
useNavigate()hook because I wanted,and;to not be URL encoded andURLSearchParams.toString()is always URL encoded.I think a better
setSearchParamswould be great, but there would probably still be weird usecases where someone wants more control over the output url and they'd still have to roll their own thing.