Clearing all query parameters

[sunwrobert]

Thanks for the great library!

Let's say I have multiple query parameters active, and I want to clear all the query parameters at once. I currently have this code (using App router):

export const useClearFilters = () => {
  const router = useRouter()
  const pathname = usePathname()

  return useCallback(() => {
    router.push(pathname)
  }, [pathname, router])
}

But this seems slow (as it does a full page fetch). Was wondering if there was a way to clear all of the query parameters shallowly. Let me know if this is more of a NextJS question instead of nuqs, but curious if you have ideas. One really manual way to do it would be to import all of my nuqs hooks and reset the values one by one but that seems naive. Thanks!

[franky47]

Yeah there is no easy way to do this with nuqs at the moment.

You could adapt your hook to do it in a shallow manner this way (untested):

export const useClearFilters = () => {
  const pathname = usePathname()
  return useCallback(() => {
    history.replaceState(null, '', pathname)
  }, [pathname])
}

One really manual way to do it would be to import all of my nuqs hooks and reset the values one by one but that seems naive.

This might make sense if there are unrelated search params you want to keep (eg: utm tracking or whatnot). You would have to collect all of your parsers in one place, and can reset them all at once this way:

const searchParamsFoo = {
  foo: parseAsString
}
const searchParamsBar = {
  bar: parseAsInteger
}

const allSearchParams = {
  ...searchParamsFoo,
  ...searchParamsBar
}

export function useClearAllSearchParams() {
  const [, setSearchParams] = useQueryStates(allSearchParams)
  return () => setSearchParams(null)
}

[sunwrobert]

Appreciate the reply. Will check these!