manual-pink

Convenient search param setter?

Heya, I was playing around a bit with updating search params when using inputs and selects and I wondered if there is any conventient way to update search params? Right now I assume I have to use navigate({ search: prev => ({ ...prev, property: value })) everywhere in the onChange handlers.. Before trying out tanstack router I was using a convenient hook (also typed) where I would call pageSettings.property.setValue which I could just throw into the onChange handler most of the time as-is. For some cases we could also use some kind of "toggle" meaning if the value is already there, remove it, if not then just add it. e.g. pageSettings.property.toggleValue. If there is no convenient way is there maybe some kind of utility types that I can use to extract the navigate params? Then I could create my own utility hook that returns a similar structure to easily set and toggle search params without needing to create handlers for every onChange prop.. e.g. something like

const useSearchHandler = <Route>(from: Route, searchKey: <possible search key based on route>) => {
   ...

  return {
    value: <current search value>,
    setValue: (value: <value type based on route and key>) => void,
    toggleValue: ...
    clearValue: ...
  }
}

const useSearchHandler = <Route>(from: Route, searchKey: <possible search key based on route>) => {
   ...

  return {
    value: <current search value>,
    setValue: (value: <value type based on route and key>) => void,
    toggleValue: ...
    clearValue: ...
  }
}

Also maybe a general question: Is this even a good idea? I'm always a friend of having useful gimmick hooks that make writing the actual component markup concise and easy to read.. But maybe there are good points against abstracting away the "main" way to use the tanstack router?

5 Replies

helpful-purple•2y ago

these kind of hooks only really work for single parameters. What if you want to change two parameters at the same time?

helpful-purple•2y ago

we had similar things proposed before, e.g. https://github.com/TanStack/router/pull/971 currently we decided against including in the library, so you need to implement them yourself

GitHub

feat: type safe useSetSearch by gronxb · Pull Request #971 · TanSta...

Summary Inspired by React Router's useSearchParams, The useNavigate method is useful for navigating between pages. However, when performing filter-related functions on the current page, it'...

manual-pinkOP•2y ago

With multiple parameters I would be fine with using the navigate method, its really just for the use case of forms when only one value gets updated I think it makes sense to not include such a thing into the library but some kind of utility types to easily extract e.g. search params of a specific route would be nice.. If there aren't any I guess I'll try to build my own then... I'll mark the thread as done

rising-crimson•2y ago

just wondering - if this useSetSearch hook made it in to the app, would it prevent beforeLoads from triggering each time a search param has changed? Here, I'm only calling a navigate event with search params as the only input, yet it calls the beforeLoad of my page each time, which slows down the click event a little bit

manual-pinkOP•2y ago

As far as I understood there is no plan to add such a hook as of now Also if anyone stumbles across this thread:

export type ExtractSearchParams<TFrom extends RoutePaths<RegisteredRouter["routeTree"]>> = Extract<
  SearchParamOptions<RegisteredRouter["routeTree"], TFrom, "", "">["search"],
  Record<string, unknown>
>;

export type ExtractSearchParams<TFrom extends RoutePaths<RegisteredRouter["routeTree"]>> = Extract<
  SearchParamOptions<RegisteredRouter["routeTree"], TFrom, "", "">["search"],
  Record<string, unknown>
>;

With this utility type you can easily extract the search object type from a route Can be used like so: ExtractSearchParams<"/products">

Gaming

Programming

Convenient search param setter?

Did you find this page helpful?