T
TanStack•2mo ago
like-gold

Typing the `location` in the `loader` function in `createFileRoute`.

Hi, I've searched all through the internet but I cannot find a solution. I currently have this Route declaration: 
export const Route = createFileRoute('/configuration/locations/')({
  validateSearch: rootSearchSchema,
  component: RouteComponent,
  loader: ({ context: { queryClient }, location }) => {
    const businessId = location.search.businessId;
    const locations = queryClient.fetchQuery({
      {...fetchQuery}
    });

    return { locations: defer(locations) };
  },
  staticData: {
    {...staticData}
  },
});
export const Route = createFileRoute('/configuration/locations/')({
  validateSearch: rootSearchSchema,
  component: RouteComponent,
  loader: ({ context: { queryClient }, location }) => {
    const businessId = location.search.businessId;
    const locations = queryClient.fetchQuery({
      {...fetchQuery}
    });

    return { locations: defer(locations) };
  },
  staticData: {
    {...staticData}
  },
});
The part that's tripping me up is the: 
const businessId = location.search.businessId;
const businessId = location.search.businessId;
My IDE is complaining that businessId doesn't exist on location.search. Even though my validateSearch has the rootSearchSchema which is imported from __root.tsx 
export const rootSearchSchema = z.object({
  businessId: z.string().optional(),
});
export const rootSearchSchema = z.object({
  businessId: z.string().optional(),
});
And is ALSO passed to createRootRouteWithContext. Like so: 
export const rootSearchSchema = z.object({
  businessId: z.string().optional(),
});

export const Route = createRootRouteWithContext<{ queryClient: QueryClient }>()({
  validateSearch: rootSearchSchema,
  component: RootComponent,
});
export const rootSearchSchema = z.object({
  businessId: z.string().optional(),
});

export const Route = createRootRouteWithContext<{ queryClient: QueryClient }>()({
  validateSearch: rootSearchSchema,
  component: RootComponent,
});
How do I type the location inside of the loader function to tell it that, yes, businessId exists on location.search here?
1 Reply
rival-black
rival-black•2mo ago
https://tanstack.com/router/latest/docs/framework/solid/guide/data-loading#using-loaderdeps-to-access-search-params
Data Loading | TanStack Router Solid Docs
Data loading is a common concern for web applications and is related to routing. When loading a page for your app, it's ideal if all of the page's async requirements are fetched and fulfilled as early...

Did you find this page helpful?