TanStackT
TanStack•7mo ago•
1 reply
verbal-lime

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}
  },
});


The part that's tripping me up is the:

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(),
});


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,
});


How do I type the location inside of the loader function to tell it that, yes, businessId exists on location.search here?
Was this page helpful?