TanStackT
TanStack•12mo ago•
8 replies
urgent-maroon

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,
});

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,
});

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!
Was this page helpful?