Dynamically generate different url parameters and re-render server component based on parameter update

[tauhid97k]

I have a tanstack re-usable table and I am in a situation where url parameters are no longer fixed like only for pagination or sorting. Some pages might have status= or type= but others not. What I want is I will pass url parameters like this -> url?status=published&date=2024-08-13 to the tanstack table and nuqs should be able to append/merge/update these parameters. And shallow: false by default so any changes to any parameter should re-render server component. This would make my table truly re-usable. Is this possible? Please, help. Thank you.

[franky47]

You can define search params completely independently from one another, so your table component only deals with table-related matters (sorting, pagination), and another component deals with domain-specific controls (eg: data fetching). The URL is merged/resolved on update.

Each hook can define different options. In the case of shallow, if you were to update one search param with shallow: true and one with shallow: false in the same event loop tick, the shallow: false would take precedence and notify the server.

[tauhid97k]

But in a dashboard 99% of filters are connected to the table. When url parameters change the table would re-render with specific table skeleton/loader. It works great with fixed parameters but I wanted to pass server parameters to table nuqs state so that I never have to touch the table component for filtering. I have a vague idea that maybe with spread operator it's possible in some way? Idk. Maybe there is a better way but I need more digging. Thanks btw.

[franky47]

Another thing to look into is useQueryStates (plural), which takes an arbitrary map of key: parser pairs, which can come from the server (at least for the key names, abritrary parsers won't be serialisable across the server/client boundary, and I'm not sure how you'd go about consuming those anyway type-wise).

[tauhid97k]

You are right. Thanks for the insight. Maybe i need to use tanstack query with manual hydration/rehydration. I will find a way.