T
TanStack•5w ago
other-emerald

Search params with zod

I have read the search params guide many times now and I think I'm misunderstanding something. Our scenario is that we have let's say 2 routes (bookings list and booking details) that have the functionality to cancel the booking. When a user clicks such link or button, we add a search param in the url to handle the open state of the modal like confirmation sheet (that includes some other cancel related functionalities), we do the same for the unassigning the worker from the booking use case. Again both routes have this button and link and add a search param to show the modal like side sheet to handle and confirm the unassignment details and to confirm the action. Where I get really confused is how to set this up in a typescript loving manner with validateSearch using zod. Do I add for both sheets the params required to use the sheet? And make them both optional? Or the whole schema is partial? And how to handle the useSearch part as it would require a from param but which route? As you can read, I don't quite grasp how this is supposed to be set up. Any pointers would be greatly appreciated
4 Replies
continuing-cyan
continuing-cyan•5w ago
I'd personally create a layout route which would handle this Another note, you do not need the zod adapter anymore if you are using zod v4 I'd setup the modal in the route that defines the param, then you can useSearch from that route the childs will inherit the parent's params afaik
other-emerald
other-emeraldOP•5w ago
Thanks I will check out the layout route suggestion. But i still fail to understand how the validateSearxh works are they just optional all or does it handle internally if key is found apply this schema or does one use some discriminated union or? With the layout route you mean that its some fragment that wraps the sheets and then has an outlet? @ferretwithabéret ?
continuing-cyan
continuing-cyan•5w ago
idk what you mean by fragment, but you'd use the concept of "nested routes" 
- bookings/
  - route.tsx  # Parent route/Layout
  - index.tsx  # Bookings list
  - $id.tsx  # Booking detail
- bookings/
  - route.tsx  # Parent route/Layout
  - index.tsx  # Bookings list
  - $id.tsx  # Booking detail
and, yes, route.tsx would contain an <Outlet /> where the childs will nest and, next to it, the modal you want to display
other-emerald
other-emeraldOP•5w ago
Thanks for the clarification.

Did you find this page helpful?