T
TanStack•7mo ago
rare-sapphire

Search Params typings not working as expected

I've read the documentation half a dozen times today already, but clearly something is wrong with my understanding. Why the search params for the ReportRoute are not being inferred as expected? It all works, but if try to use, for example: 
const search = ReportRoute.useSearch();
const search = ReportRoute.useSearch();
within a given component, search is typed as any. The route tree is as below: 
import {
  createRootRoute,
  createRoute,
  createRouter,
} from "@tanstack/react-router";
import { fallback, zodValidator } from "@tanstack/zod-adapter";
import { DateTime } from "luxon";
import { isDate } from "validator";
import { z } from "zod";
import { Index } from "./features/Index";
import { Report } from "./features/Report";
import { Root } from "./features/Root";

const ReportRouteSchema = z.object({
  date: fallback(
    z
      .string()
      .refine((date) =>
        isDate(date, { format: "yyyy-MM-dd", strictMode: true })
      ),
    DateTime.now().toISODate()
  ).default(DateTime.now().toISODate()),
});

export type ReportRouteSearch = z.infer<typeof ReportRouteSchema>;

export const RootRoute = createRootRoute({
  component: Root,
});

export const IndexRoute = createRoute({
  getParentRoute: () => RootRoute,
  path: "/",
  component: Index,
});

export const ReportRoute = createRoute({
  getParentRoute: () => RootRoute,
  path: "report",
  validateSearch: zodValidator(ReportRouteSchema),
  component: Report,
});

export const RootRouteTree = RootRoute.addChildren([IndexRoute, ReportRoute]);

export const Router = createRouter({
  routeTree: RootRouteTree,
});
import {
  createRootRoute,
  createRoute,
  createRouter,
} from "@tanstack/react-router";
import { fallback, zodValidator } from "@tanstack/zod-adapter";
import { DateTime } from "luxon";
import { isDate } from "validator";
import { z } from "zod";
import { Index } from "./features/Index";
import { Report } from "./features/Report";
import { Root } from "./features/Root";

const ReportRouteSchema = z.object({
  date: fallback(
    z
      .string()
      .refine((date) =>
        isDate(date, { format: "yyyy-MM-dd", strictMode: true })
      ),
    DateTime.now().toISODate()
  ).default(DateTime.now().toISODate()),
});

export type ReportRouteSearch = z.infer<typeof ReportRouteSchema>;

export const RootRoute = createRootRoute({
  component: Root,
});

export const IndexRoute = createRoute({
  getParentRoute: () => RootRoute,
  path: "/",
  component: Index,
});

export const ReportRoute = createRoute({
  getParentRoute: () => RootRoute,
  path: "report",
  validateSearch: zodValidator(ReportRouteSchema),
  component: Report,
});

export const RootRouteTree = RootRoute.addChildren([IndexRoute, ReportRoute]);

export const Router = createRouter({
  routeTree: RootRouteTree,
});
2 Replies
extended-salmon
extended-salmon•7mo ago
did you do the module augmentation? also afaik @tanstack/zod-adapter shouldn't be necessary with the latest version of zod, as it supports standard-schema now
rare-sapphire
rare-sapphireOP•7mo ago
How should I have done that? I merely followed what is in the documentation, maybe I missed something then. Well, f##k me sideways, that was the solution. Clearly I should have read the code a bit more thoroughly, as it would have saved me two days of head banging...

Did you find this page helpful?