T
TanStack•8mo ago
foreign-sapphire

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
correct-apricot
correct-apricot•8mo ago
cc @Chris Horobin
multiple-amethyst
multiple-amethyst•8mo 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
foreign-sapphire
foreign-sapphire•7mo ago
Any updates on this? inheritance of search parameters is still unclear.
correct-apricot
correct-apricot•7mo ago
what is unclear? please provide a complete example
extended-salmon
extended-salmon•7mo 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
ambitious-aqua
ambitious-aqua•5mo 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?