T
TanStack2mo ago
extended-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 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...
7 Replies
modern-teal
modern-teal2mo ago
the zodValidator from the zod-adapter package is no longer necessary, can you try to pass the productSearchSchema directly? The docs should be updated I guess ...
extended-salmon
extended-salmonOP2mo ago
Same result 🙁
modern-teal
modern-teal2mo ago
Then I can not reproduce the bug. Can you try to update your package versions? Also try deleting the routeTree.gen.ts , dont worry it will be regenerated when you run the project again
No description
modern-teal
modern-teal2mo ago
No description
extended-salmon
extended-salmonOP2mo ago
Regenerating the routeTree seems to fix it. Thanks!
modern-teal
modern-teal2mo ago
Dang, I thought It would not be the sollution. Were you running the project? routeTree.gen.ts is updated automatically when the web server is running in dev mode
extended-salmon
extended-salmonOP2mo ago
Hmm. Yeah maybe it wasn't running at the time 🥲

Did you find this page helpful?