How to use completely optional search params?

[danieljmann96]

I want these two URLs to both be valid:

/create
/create?option1=2.option3=5

I got this far:

const customRoute = new Route({
...other props,
validateSearch: (search?: unknown): z.infer<typeof CustomZodParser> | Record<string, never> => {
   const result = CustomZodParser.safeParse(search);
   if(result.success) {
       return result.data
   }
   return {}
}
})

This works okay, but then if I try to navigate to the page, the "search" prop is required in typescript. Is there an easier way to do this?

IMO it would be better if you could just return null or undefined in validateSearch, making the "search" prop optional when navigating

[schiller-manuel]

(I don't know if I understand your problem correctly. If not, please create a minimal reproducer.)

You can tag the param type of a search validation function using SearchSchemaInput.

see this example:
https://github.com/TanStack/router/blob/main/examples/react/basic-default-search-params/src/main.tsx#L149

and the docs:
https://tanstack.com/router/v1/docs/api/router/RouteOptionsType#validatesearch

In your case, you could have only optional properties like this:

 validateSearch: (
    input: {
      foo?: string
      bar?: 'string'
    } & SearchSchemaInput,
  ) => ...

Then when navigating to that page, the search prop will not be required anymore.

[danieljmann96]

This is what I needed thanks!
For clarification, the first input type doesn't even need to be typed as I'm using the zod resolver. So I can just do this

 validateSearch: (
    input: unknown & SearchSchemaInput,
  ) => ...

[chidimo]

I just ran into same issue and this helped.

import {SearchSchemaInput} from '@tanstack/react-router';


validateSearch: (search: unknown & SearchSchemaInput) => MySearchSchema.parse(search)

[twiddler]

Also see #2000 and https://tanstack.com/router/latest/docs/framework/react/guide/search-params#zod-adapter.