I wanna pass multiple dynamic properties through a single useQueryState hook, Is it possible ?

[ShibanshL]

So i have multiple filters i wanna apply, like search, id, team etc that use different kinds of input. What i have been trying to do is that i use a useState hook as the base object where i dynamically add a new property every time i pass in a value to a filter then i use an useEffect hook to sort through that object and check for the newest added property and pass the single property through the useQueryState hook to make it appear on the url. But this way seem to be kinda unstable at times. Removal of the said object also becomes an hassle, is there any better way to go about this ?

[franky47]

Ask yourself if those filters all belong under the same key in the URL, or if they can live each on a given key. This decision shouldn't be based on how the implementation works to obtain and apply those filters, but rather on the semantics of each search param in the URL.

Eg: prefer ?search=Hello+world&id=baadf00d&team=12345 rather than ?filters=search:Hello+world,id:baadf00d,team:12345

You could then recompose them to the right data shape, using useQueryStates (plural) to manage multiple keys in one go.

[franky47]

Do you have a minimal code example we could iterate on?

The state updater function of useQueryStates can accept a subset of the keys it manages, so you could have a centralised useQueryStates hook that contains every filter (key + parser type), and each input would deal with updating its own.

[ShibanshL]

[franky47]

Using useQueryState without a key isn't going to work.

You could define a variadic input for useQueryStates, but you would still have to give it a list of possible keys to handle. If you are looking for a true dynamic way, where arbitrary search params are driven by input name attributes, nuqs is probably not the right approach.

[ShibanshL]

Thank you so much, I've found a way to fix my issue.