@tanstack/zod-adapter, fallback type-safe issue

react

Hello everyone, I'm trying to learn tanstack search params. According to the doc, I should use

fallback

fallback

and

zodValidator

zodValidator

functions from

@tanstack/zod-adapter

@tanstack/zod-adapter

to ensure better type safety and a smoother navigation API experience.

However, I’ve run into an issue: when I use this pattern, Route.useSearch() is unable to infer my search param types. If I switch back to a standard Zod schema, the type safety works as expected. Even though the docs recommend using validateSearch with fallback and zodValidator, I can't get the types to sync.

Does anyone know why this is happening or how to fix it?"

Doc link: https://tanstack.com/router/latest/docs/framework/react/guide/search-params#zod

const searchSchema = z.object({
  page: fallback(z.number(), 1).default(1),
  status: fallback(
    z.enum(['all', 'confirmed', 'pending', 'cancelled']),
    'all',
  ).default('all'),
})

export const Route = createFileRoute('/bookings')({
  component: RouteComponent,
  validateSearch: zodValidator(searchSchema),
})

function RouteComponent() {
  const { page, status } = Route.useSearch()
  const navigate = Route.useNavigate()

// rest of the file

const searchSchema = z.object({
  page: fallback(z.number(), 1).default(1),
  status: fallback(
    z.enum(['all', 'confirmed', 'pending', 'cancelled']),
    'all',
  ).default('all'),
})

export const Route = createFileRoute('/bookings')({
  component: RouteComponent,
  validateSearch: zodValidator(searchSchema),
})

function RouteComponent() {
  const { page, status } = Route.useSearch()
  const navigate = Route.useNavigate()

// rest of the file

TanStack•3mo ago•

4 replies

living-lavender

@tanstack/zod-adapter, fallback type-safe issue

react

Hello everyone, I'm trying to learn tanstack search params. According to the doc, I should use

fallback

fallback

and

zodValidator

zodValidator

functions from

@tanstack/zod-adapter

@tanstack/zod-adapter

const searchSchema = z.object({
  page: fallback(z.number(), 1).default(1),
  status: fallback(
    z.enum(['all', 'confirmed', 'pending', 'cancelled']),
    'all',
  ).default('all'),
})

export const Route = createFileRoute('/bookings')({
  component: RouteComponent,
  validateSearch: zodValidator(searchSchema),
})

function RouteComponent() {
  const { page, status } = Route.useSearch()
  const navigate = Route.useNavigate()

// rest of the file

const searchSchema = z.object({
  page: fallback(z.number(), 1).default(1),
  status: fallback(
    z.enum(['all', 'confirmed', 'pending', 'cancelled']),
    'all',
  ).default('all'),
})

export const Route = createFileRoute('/bookings')({
  component: RouteComponent,
  validateSearch: zodValidator(searchSchema),
})

function RouteComponent() {
  const { page, status } = Route.useSearch()
  const navigate = Route.useNavigate()

// rest of the file

@tanstack/zod-adapter, fallback type-safe issue

Similar Threads

@tanstack/zod-adapter, fallback type-safe issue

Similar Threads

Similar Threads

Similar Threads