T
TanStack•16mo ago
adverse-sapphire

Link component expects `search` prop when validateSearch is used in a route

export const Route = createFileRoute('/dashboard')({
  component: Dashboard,
  validateSearch: (search: Record<string, unknown>): PaginationState => ({
    pageIndex: Number(search.pageIndex) || 0,
    pageSize: Number(search.pageSize) || 10,
  }),
});
export const Route = createFileRoute('/dashboard')({
  component: Dashboard,
  validateSearch: (search: Record<string, unknown>): PaginationState => ({
    pageIndex: Number(search.pageIndex) || 0,
    pageSize: Number(search.pageSize) || 10,
  }),
});
This is my /dashboard route. It works as expected with typings. However, <Link to="/dashboard"> expects me to provide search={{pageIndex: 0, pageSize: 10}} prop. I understand that this is because PaginationState is the following. 
const PaginationState: {
  pageIndex: number;
  pageSize: number;
}
const PaginationState: {
  pageIndex: number;
  pageSize: number;
}
I could do Partial<PaginationState>, but then parsing those search params with const searchParams = useSearch({ from: '/dashboard' }); results in potentially undefined params. Basically I want to avoid providing search prop with initial values every time I link to /dashboard. Because if I don't provide these values, the fallback values in the validateSearch will apply. So, even if someone directly visits /dashboard route, it will update the url as /dashboard?pageIndex=0&pageSize=10. Am I missing something here?
4 Replies
correct-apricot
correct-apricot•16mo ago
have a look at https://tanstack.com/router/latest/docs/framework/react/api/router/RouteOptionsType#validatesearch-method
RouteOptions type | TanStack Router React Docs
The RouteOptions type is used to describe the options that can be used when creating a route. RouteOptions properties
correct-apricot
correct-apricot•16mo ago
Optionally, the parameter type can be tagged with the SearchSchemaInput type like this: (searchParams: TSearchSchemaInput & SearchSchemaInput) => TSearchSchema. If this tag is present, TSearchSchemaInput will be used to type the search property of <Link /> and navigate() instead of TSearchSchema. The difference between TSearchSchemaInput and TSearchSchema can be useful, for example, to express optional search parameters.
adverse-sapphire
adverse-sapphireOP•16mo ago
Thank you, seems like this is what I need. However, if I do the following, I lose the types for search prop on <Link/> component. 
validateSearch: (
    search: Record<string, unknown> & SearchSchemaInput,
  ): PaginationState
validateSearch: (
    search: Record<string, unknown> & SearchSchemaInput,
  ): PaginationState
I don't get auto suggestion for the keys of the object passed to search prop. 
<Link to="/dashboard" search={{}}>
<Link to="/dashboard" search={{}}>
correct-apricot
correct-apricot•16mo ago
that's because search: Record<string, unknown> is a very broad type I would use something like this: 
type PaginationStateInput = {
  pageIndex?: number;
  pageSize?: number;
}
    search: PaginationStateInput & SearchSchemaInput,
  ): PaginationState
type PaginationStateInput = {
  pageIndex?: number;
  pageSize?: number;
}
    search: PaginationStateInput & SearchSchemaInput,
  ): PaginationState

Did you find this page helpful?