T
TanStack•15mo ago
other-emerald

Validate Search different output and input types?

I used to have the following setup: 
const route = {
  path: '/zzz'
  ...
  validateSearch: zzzSearchSchema
}

const zzzSearchSchema = z.object({
  foo: z.number().min(3)
}).catch({
  foo: 3
})

...

const FooBar= () => <Navigate to={'/zzz'} search={true} />
const route = {
  path: '/zzz'
  ...
  validateSearch: zzzSearchSchema
}

const zzzSearchSchema = z.object({
  foo: z.number().min(3)
}).catch({
  foo: 3
})

...

const FooBar= () => <Navigate to={'/zzz'} search={true} />
which makes sense to me, when I render FooBar i expect to navigate to '/zzz', with default params This setup allowed me to keep all the defaults in a single place (the schema) But after updating to the newest version this breaks 
export type SearchParamOptions<
  TRouter extends AnyRouter,
  TFrom,
  TTo extends string,
> =
  IsRequired<TRouter, 'SEARCH', TFrom, TTo> extends never
    ? MakeOptionalSearchParams<TRouter, TFrom, TTo>
    : MakeRequiredSearchParams<TRouter, TFrom, TTo>
export type SearchParamOptions<
  TRouter extends AnyRouter,
  TFrom,
  TTo extends string,
> =
  IsRequired<TRouter, 'SEARCH', TFrom, TTo> extends never
    ? MakeOptionalSearchParams<TRouter, TFrom, TTo>
    : MakeRequiredSearchParams<TRouter, TFrom, TTo>
SearchParamOptions are now using MakeRequiredSearchParams, which disallows true How can I have my strongly typed search params inside of my component, while having freedom to pass in any input into them?
1 Reply
harsh-harlequin
harsh-harlequin•15mo ago
this should help: https://github.com/TanStack/router/issues/1701#issuecomment-2145706277
GitHub
search seems to be inferring the output type of the `validateSear...
Describe the bug I want to validate my search params while also making it optional when navigating from other routes but I'll provide the default value if there isn't one so I'm expecti...

Did you find this page helpful?