Route.useSearch() not inferring type from validateSearch

Was trying out examples from this doc
https://tanstack.com/router/v1/docs/framework/react/guide/search-params#validating-and-typing-search-params

import { createFileRoute } from '@tanstack/react-router'
import { zodValidator } from '@tanstack/zod-adapter'
import { z } from 'zod'

const productSearchSchema = z.object({
  page: z.number().default(1),
  filter: z.string().default(''),
  sort: z.enum(['newest', 'oldest', 'price']).default('newest'),
})

export const Route = createFileRoute('/shop/products/')({
  validateSearch: zodValidator(productSearchSchema),
  component: RouteComponent
})

function RouteComponent() {
  const search = Route.useSearch()
  
  return <div>Page {search.page}</div>
}

import { createFileRoute } from '@tanstack/react-router'
import { zodValidator } from '@tanstack/zod-adapter'
import { z } from 'zod'

const productSearchSchema = z.object({
  page: z.number().default(1),
  filter: z.string().default(''),
  sort: z.enum(['newest', 'oldest', 'price']).default('newest'),
})

export const Route = createFileRoute('/shop/products/')({
  validateSearch: zodValidator(productSearchSchema),
  component: RouteComponent
})

function RouteComponent() {
  const search = Route.useSearch()
  
  return <div>Page {search.page}</div>
}

My expectation is useSearch would be typed according to the validated schema. However, the

search

search

type is

{}

{}

Search Params | TanStack Router React Docs

Similar to how TanStack Query made handling server-state in your React and Solid applications a breeze, TanStack Router aims to unlock the power of URL search params in your applications.

If you ar...

TanStack•5mo ago•

8 replies

broad-salmon

Route.useSearch() not inferring type from validateSearch

Was trying out examples from this doc
https://tanstack.com/router/v1/docs/framework/react/guide/search-params#validating-and-typing-search-params

import { createFileRoute } from '@tanstack/react-router'
import { zodValidator } from '@tanstack/zod-adapter'
import { z } from 'zod'

const productSearchSchema = z.object({
  page: z.number().default(1),
  filter: z.string().default(''),
  sort: z.enum(['newest', 'oldest', 'price']).default('newest'),
})

export const Route = createFileRoute('/shop/products/')({
  validateSearch: zodValidator(productSearchSchema),
  component: RouteComponent
})

function RouteComponent() {
  const search = Route.useSearch()
  
  return <div>Page {search.page}</div>
}

import { createFileRoute } from '@tanstack/react-router'
import { zodValidator } from '@tanstack/zod-adapter'
import { z } from 'zod'

const productSearchSchema = z.object({
  page: z.number().default(1),
  filter: z.string().default(''),
  sort: z.enum(['newest', 'oldest', 'price']).default('newest'),
})

export const Route = createFileRoute('/shop/products/')({
  validateSearch: zodValidator(productSearchSchema),
  component: RouteComponent
})

function RouteComponent() {
  const search = Route.useSearch()
  
  return <div>Page {search.page}</div>
}

My expectation is useSearch would be typed according to the validated schema. However, the

search

search

type is

{}

{}

Search Params | TanStack Router React Docs

Similar to how TanStack Query made handling server-state in your React and Solid applications a breeze, TanStack Router aims to unlock the power of URL search params in your applications.

If you ar...

Route.useSearch() not inferring type from validateSearch

Similar Threads

Route.useSearch() not inferring type from validateSearch

Similar Threads

Similar Threads

Similar Threads