T
TanStack•3y ago
absent-sapphire

Type Inference with useParams and useSearch?

Hoping someone can help me understand why I am not seeing the correct types when using useParams and useSearch. Here is the route definition: 
export const resourceTabsSchema = z.object({
  tab: z
    .union([
      z.literal("comments"),
      z.literal("attachments"),
      z.literal("activity"),
    ])
    .optional(),
});

export const feedbackDetailRoute = new Route({
  path: "$id",
  component: FeedbackDetailsRoute,
  getParentRoute: () => feedbackRoute,
  validateSearch: resourceTabsSchema,
});
export const resourceTabsSchema = z.object({
  tab: z
    .union([
      z.literal("comments"),
      z.literal("attachments"),
      z.literal("activity"),
    ])
    .optional(),
});

export const feedbackDetailRoute = new Route({
  path: "$id",
  component: FeedbackDetailsRoute,
  getParentRoute: () => feedbackRoute,
  validateSearch: resourceTabsSchema,
});
And then in the component tree: 
export function FeedbackDetailsRoute() {
    // id: any
    const { id } = useParams({ from: feedbackDetailRoute.id });

    // tab: any
    const { tab } = useSearch({ from: feedbackDetailRoute.id });
}
export function FeedbackDetailsRoute() {
    // id: any
    const { id } = useParams({ from: feedbackDetailRoute.id });

    // tab: any
    const { tab } = useSearch({ from: feedbackDetailRoute.id });
}
I am correct in assuming these should be typed accordingly?
2 Replies
wise-white
wise-white•3y ago
This should work. But hard to say why without a reproduction
foreign-sapphire
foreign-sapphire•3y ago
@ryantbrown Did you figure out why in the end? When using useParams I'm getting some circular dependency errors that I can't reproduce on StackBlitz 🤔 'XXX' implicitly has type 'any' because it does not have a type annotation and is referenced directly or indirectly in its own initializer.ts(7022) presetEditRoute.useParams()

Did you find this page helpful?