equal-aqua

Does type interference work on navigate({search})

I am having little trouble with type interference with search and navigate. I took the example from https://tanstack.com/router/v1/docs/framework/react/guide/search-params#usenavigate-navigate-search-

export const Route = createFileRoute("/_dashboard/exercises")({
  validateSearch: (
    searchObj: Record<string, unknown>
  ): AllExerciseSearchFilters => {
    const filters = (searchObj?.filters ||
      {}) as AllExerciseSearchFilters["filters"];
    return {
      searchText: (searchObj?.searchText as string) || "",
      sortOrder: (searchObj?.sortOrder as Order_By) || Order_By.Desc,
      orderBy: (searchObj?.orderBy as string) || "created_at",
      filters: {
        ageGroup: filters?.ageGroup || [],
        tags: filters?.tags || [],
        taxonomyFocus: filters?.taxonomyFocus || [],
        taxonomyMore: filters?.taxonomyMore || [],
        groupSize: filters?.groupSize || [],
        author: filters?.author || [],
        collection: filters?.collection || [],
      },
    } as AllExerciseSearchFilters;
  },

export const Route = createFileRoute("/_dashboard/exercises")({
  validateSearch: (
    searchObj: Record<string, unknown>
  ): AllExerciseSearchFilters => {
    const filters = (searchObj?.filters ||
      {}) as AllExerciseSearchFilters["filters"];
    return {
      searchText: (searchObj?.searchText as string) || "",
      sortOrder: (searchObj?.sortOrder as Order_By) || Order_By.Desc,
      orderBy: (searchObj?.orderBy as string) || "created_at",
      filters: {
        ageGroup: filters?.ageGroup || [],
        tags: filters?.tags || [],
        taxonomyFocus: filters?.taxonomyFocus || [],
        taxonomyMore: filters?.taxonomyMore || [],
        groupSize: filters?.groupSize || [],
        author: filters?.author || [],
        collection: filters?.collection || [],
      },
    } as AllExerciseSearchFilters;
  },

Search Params | TanStack Router Docs

Similar to how TanStack Query made handling server-state in your React applications a breeze, TanStack Router aims to unlock the power of URL search params in your applications. Why not just use URLSearchParams?

5 Replies

equal-aquaOP•2y ago

So currently it doesnt seem to interfer the correct types on navigate search. I use exercise.tsx and exercise.lazy.tsx file route approach, not sure if it has to do with this

vicious-gold•2y ago

Could you add the from proprty onto the useNavigate hook?

const navigate = useNavigate({ from: '/excercises' });

const navigate = useNavigate({ from: '/excercises' });

This would narrow the types.

equal-aquaOP•2y ago

I will try, but from is actually diffictult in this case as there are multiple locations possible as from

foreign-sapphire•2y ago

you can supply a string union as from:

const navigate = useNavigate({ from: '/foo' | '/bar' });

const navigate = useNavigate({ from: '/foo' | '/bar' });

equal-aquaOP•2y ago

This works very well:

  const selectedFilters = useSearch({
    from: isCollection ? "/_dashboard/collections" : "/_dashboard/exercises"
  })

  const selectedFilters = useSearch({
    from: isCollection ? "/_dashboard/collections" : "/_dashboard/exercises"
  })

Gaming

Programming

Does type interference work on navigate({search})

Did you find this page helpful?