How to handle dynamic values of query params

[prafulrajhm]

Hi all,

I am developing a page which has different filters, upon selecting any filter, query params need to be updated. For this, I am using the following code.

Router.replace(
{
pathname: router.route,
query: {
l: filteredArray.length == 0 ? null : filteredArray,
d: departmentFilters.length == 0 ? null : departmentFilters,
q: keyword == '' ? null : keyword,
},
},
{
pathname: router.route,
query: {
l: filteredArray.length == 0 ? null : filteredArray,
d: departmentFilters.length == 0 ? null : departmentFilters,
q: keyword == '' ? null : keyword,
},
},
);

The issue I am facing is, I am getting query params in the URL even though the value is null like domain.com/pageName?l=&d=&q=. how to get just domin.com/pageName if no filter is applied.

Is there any way to tell next router to not use particular param if the value is null. (like in Axios post)?

[jamesmosier]

You could use this for your query object:

query: {
  ...(filteredArray.length && {l: filteredArray}),
  ...(departmentFilters.length && {d: departmentFilters}),
  ...(keyword && {q: keyword})
},

that will conditionally add the filter properties to the query object

[prafulrajhm]

This worked, thanks @jamesmosier