fascinating-indigo

Can we have different types for search params input and output?

By search params input I mean:

<Link to="/" search={{page: 1}} /> // <-- input is the arguments we pass to the `search` prop

<Link to="/" search={{page: 1}} /> // <-- input is the arguments we pass to the `search` prop

and by output I mean:

// route

const IndexRoute() => {
  const {page, size} = Route.useSearch() // output is the return value of the `useSearch` hook
}

// route

const IndexRoute() => {
  const {page, size} = Route.useSearch() // output is the return value of the `useSearch` hook
}

I have many routes that have page and size search params. I don't want to specify these values for every page in every link. That is why I use default values with zod. However, each page can have different default values for size, and I want to specify this default only once inside each route's search params' schema. Some pages can have more search params and here I face problems: For example /users page can have a 3rd param: sort. And I have a link:

<Link to="/users" search={{sort: '-name'}} />

<Link to="/users" search={{sort: '-name'}} />

I get a typescript error that requires me to add page and size . But I don't want to, I want them to be empty here and the validateSearch and zod to apply the default values automatically. If I change the return type of validateSearch to make the search params optional, then I get optional types in the output:

// route
const {page, size} = Route.useSearch() // page and size are of type `number | undefined`

// route
const {page, size} = Route.useSearch() // page and size are of type `number | undefined`

But they have a fallback, and their types should be just number. Could you please help me, how can I make sure that I can omit optional properties which have default values from the search prop and get the non-optional variables from the useSearch hook? As far as I understood, both of the types are controlled by the return type of the validateSearch

4 Replies

broad-brown•2y ago

have a look at https://tanstack.com/router/latest/docs/framework/react/api/router/SearchSchemaInputType example https://github.com/TanStack/router/blob/main/examples%2Freact%2Fbasic-default-search-params%2Fsrc%2Fmain.tsx

SearchSchemaInput type | TanStack Router Docs

The SearchSchemaInput type is used to tag the input type of a validateSearch method to signalize to TanStack router that its parameter type TSearchSchemaInput shall be used to type the search param of and navigate().

GitHub

router/examples/react/basic-default-search-params/src/main.tsx at m...

🤖 Fully typesafe Router for React (and friends) w/ built-in caching, 1st class search-param APIs, client-side cache integration and isomorphic rendering. - TanStack/router

foreign-sapphire•2y ago

It does not seems to work in 1.26.12.

validateSearch: (
    input: {
      mobileSidebar?: boolean;
      appModal?: string;
      businessId?: string;
      gedItemKey?: string;
    } & SearchSchemaInput,
  ) => searchSchema.parse(input)

validateSearch: (
    input: {
      mobileSidebar?: boolean;
      appModal?: string;
      businessId?: string;
      gedItemKey?: string;
    } & SearchSchemaInput,
  ) => searchSchema.parse(input)

I try to link to one of that route's child and got this error:

Type '{ lifesheetPage: number; }' is missing the following properties from type 'ResolveFullSearchSchemaInput<Route<Route<RootRoute<RootSearchSchema, RootSearchSchema, RootSearchSchema, RouteContext, RouteContext, RouterContext, {}, unknown, unknown>, ... 19 more ..., AnyRoute>, ... 19 more ..., AnyRoute>, Omit<...>>': mobileSidebar, appModal, businessId, gedItemKey, productModal

broad-brown•2y ago

there seems to be a regression in 1.26.12 we are working on it

foreign-sapphire•2y ago

Okay thx !

Gaming

Programming

Can we have different types for search params input and output?

Did you find this page helpful?