How do I infer the type of all possible search parameters?

[eddie-atkinson]

I am in the midst of a migration from another router and I have some general components that interact with search params in a generic way. e.g.

export type DataDatePickerProps = {
  label: string;
  queryParamKey: string;
  minDate?: string;
  maxDate?: string;
};

export const DataDatePicker = ({
  label,
  queryParamKey,
  minDate,
  maxDate,
}: DataDatePickerProps) => {
  const [queryValue, setQuery] = useDataFilterQuery(queryParamKey);

  const handleFilterValueChange = (value: string) => {
    setQuery(value);
  };

  const currentValue = typeof queryValue === 'string' ? queryValue : undefined;

  return (
    <DatePicker
      placeholder={label}
      value={currentValue}
      label={label}
      minDate={minDate}
      maxDate={maxDate}
      shouldShowCalendarButton
      onChange={handleFilterValueChange}
    />
  );
};

These in turn call a hook like useDataFilterQuery:

export const useDataFilterQuery = (queryKey: string) => {
  const { location } = useRouterState();
  const navigate = useNavigate({ from: location.pathname });

  const searchParams = useSearch({ strict: false });

  const setQuery = (
    newValue?: string | number | (string | number)[] | null,
  ) => {
    navigate({
      to: location.pathname,
      search: {
        ...searchParams,
        [queryKey]: newValue,
      },
    });
  };

  // TODO(router-migration): Incredibly dirty hack. This whole file should be migrated away from
  const queryKeyValue = searchParams?.[queryKey as keyof typeof searchParams];

  return [queryKeyValue, setQuery] as const;
};

As you can see I have TODO in here where I cast the queryKey to be a valid return value of useSearch. Ideally I'd like to extract the type of all possible query params so that I can make it the type for queryKey in this function, which should, I believe, also give me return type safety when I index into searchParams with that key. Is there a way to do this?

Unrelated, but also related I am being forced to spread searchParams into navigate because of a type error when I follow the recommended pattern of:

navigate({search: (prev) => ({...prev, [queryKey]: value})})

Tanstack version: 1.81.9
Typescript version: 5.5.3

[eddie-atkinson]

I guess a side question would also be: is there a recommended pattern for handling building generic components that can interface with query params like this?

[5ebastianMeier]

I have not tried this out yet, but I guess if you provide validateSearch with a schema that includes all possible scenarios that are shared across all routes I would expect these to be accessible in any search typings without redeclaring them for every route.
If this works, this might also work on multiple levels so that you could share certain searchParams across components for a single parent route only.
Assuming all of the above is true, it might work to use the Route API of the routeTree your shared searchParams are declared on like this:

const navigate = mySharedRouteTree.useNavigate;

That would enable you to build hooks around your shared functionality to encapsulate common logic.

[flodaniel]

@eddie-atkinson did you resolve this properly?

[eddie-atkinson]

Hey @flodaniel,

No, I still haven't figured this one out yet. I've tried to push as many query parameters to the top of the component tree as possible so I can use Route.useSearch. But that doesn't quite work for the use case where I want a generic component to update search params with its state (e.g. a search input).

[flodaniel]

@eddie-atkinson,
I got help on discord:

import { RegisteredRouter } from "@tanstack/react-router";
import { FullSearchSchema } from "@tanstack/router-core";

export type FullSearchParams = FullSearchSchema<RegisteredRouter["routeTree"]>;
export type SearchKeys = keyof FullSearchParams;

@tanstack/router-core is from an internal package so either you add this import manually or install @tanstack/router-core as a direct dependency.