How to make search params optional and rely on zod .catch() for default ?
Hello !
When defining routes we can use validateSearch combined with zod schemas in order to type the route search, however this schema cannot be undefined and while we can set defaults with catch(), we are still required to provide said search params when navigating with Link or navigate() and it is a bit tedious
Is there a clean approach to make search params optionnal for navigation ?
Cheers ! 🙂
4 Replies
ratty-blush•2y ago
my approach to this is to leave all search params optional, but there's a different way with SearchSchemaInput:
https://tanstack.com/router/v1/docs/framework/react/api/router/SearchSchemaInputType
SearchSchemaInput type | TanStack Router React Docs
The SearchSchemaInput type is used to tag the input type of a validateSearch method to signalize to TanStack router that its parameter type TSearchSchemaInput shall be used to type the search param of
and navigate().ratty-blush•2y ago
example would be this:
https://github.com/TanStack/router/blob/fcc278ffc8ef2bba50c4ed4b08a19c7248eb95c2/examples/react/basic-default-search-params/src/main.tsx#L145-L156
GitHub
router/examples/react/basic-default-search-params/src/main.tsx at f...
🤖 Fully typesafe Router for React (and friends) w/ built-in caching, 1st class search-param APIs, client-side cache integration and isomorphic rendering. - TanStack/router
rare-sapphireOP•2y ago
this is great ! thank you so much for such a fast and clear answer, with exemples
as always, you're the best 💌
fair-rose•2y ago
Perfect! This is exactly what I've been looking for!
Thanks so much!