T
TanStack•11mo ago
ambitious-aqua

Search params inheritance merging

Hi everyone! I’m running into an issue with search param inheritance. I have a parent route /users with search params defined like this: 
const searchParams = z.object({
  action: z.enum(["add-user"]).optional(),
});

export const Route = createFileRoute("/users")({
  validateSearch: zodValidator(searchParams),
  component: RouteComponent,
});
const searchParams = z.object({
  action: z.enum(["add-user"]).optional(),
});

export const Route = createFileRoute("/users")({
  validateSearch: zodValidator(searchParams),
  component: RouteComponent,
});
And a child route /users/$userId with search params defined like this: 
const searchParams = z.object({
  action: z.enum(["delete-user"]).optional(),
});

export const Route = createFileRoute("/users/$userId")({
  validateSearch: zodValidator(searchParams),
  beforeLoad: ({ search }) => {
    search.action;
    // I would like the type here to be "add-user" | "delete-user" | undefined
  },
  component: RouteComponent,
});
const searchParams = z.object({
  action: z.enum(["delete-user"]).optional(),
});

export const Route = createFileRoute("/users/$userId")({
  validateSearch: zodValidator(searchParams),
  beforeLoad: ({ search }) => {
    search.action;
    // I would like the type here to be "add-user" | "delete-user" | undefined
  },
  component: RouteComponent,
});
Based on the docs, search params from parent routes should be inherited and merged into child routes. However, when the action param is used in both parent and child routes, it doesn't seem to merge as expected. Instead, search.action in the child route only has the type from the child route ("delete-user" | undefined), not the merged type ("add-user" | "delete-user" | undefined). Am I missing something about how search param inheritance works, or is this a limitation when overlapping keys are involved? Any suggestions for how to achieve the desired type? Thanks in advance!
6 Replies
robust-apricot
robust-apricot•11mo ago
cc @Chris Horobin
equal-aqua
equal-aqua•11mo ago
Even if you merged the type definitions, wouldn't the parse in this example fail? In /users/$userID if you passed "add-user" the parse function would throw an error
wise-white
wise-white•10mo ago
Any updates on this? inheritance of search parameters is still unclear.
robust-apricot
robust-apricot•10mo ago
what is unclear? please provide a complete example
ambitious-aqua
ambitious-aqua•10mo ago
Yes, these validators are conflicting. Any value would fail on either match I think router will run all validators of all matches and will bail if one fails
dependent-tan
dependent-tan•8mo ago
running into this ^ with deriving dialog states from url- has anyone found a pattern for this that's ergonomic/somewhat generic? i have a search param key action, which can be many things, ideally can stack into an array. but schemas are clashing currently as described in the original post

Did you find this page helpful?