TanStackT
TanStack•12mo ago
wet-aqua

Cannot get route type for some routes

I'm struggling to get the right type for some routes.

The question: Why is my file route campaignDraftsRoute not satisfying TRoute extends AnyRoute but other routes are?

I have the following file route:
export const Route = createFileRoute("/_authenticated/campaigns/drafts")({
  component: CampaignsDraftsComponent,
  loader(ctx) {
    ctx.context.queryClient.ensureQueryData(
      convexQuery(api.campaigns.queries.getCampaigns, {
        filter: {
          anyOfStatus: ["draft"],
        },
      })
    );
  },
});

And then I'm trying to include it as part of my navigation:

<NavMain
  item={{
    title: "Campaigns",
    route: campaignRoute, // <-- this works!
    icon: Megaphone,
    subItems: [
      {
        title: "Overview",
        route: campaignRoute, // <-- this works!
      },
      {
        title: "Drafts",
        route: campaignDraftsRoute, // <-- this doesn't work! :\
      },


Finally, I've defined the type that NavMain is expecting here as TRoute extends AnyRoute:

export function NavMain<TRoute extends AnyRoute>({
  title,
  item,
}: {
  title?: string;
  item: {
    title: string;
    route: TRoute;
    icon?: LucideIcon;
    subItems?: {
      title: string;
      route: TRoute;
    }[];
  };
}) {
...


The only difference I can see between the routes that work and the routes that don't is that the ones that work are simple:

// this type of route works:
export const Route = createFileRoute("/_authenticated/campaigns/overview")({
  component: CampaignsOverviewComponent,
});

// a route with a loader does not:
export const Route = createFileRoute("/_authenticated/campaigns/overview")({
  component: CampaignsOverviewComponent,
  loader(ctx) {
     ...
   }
});
Was this page helpful?