T
TanStack•8mo ago
equal-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"],
        },
      })
    );
  },
});
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! :\
      },
<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;
    }[];
  };
}) {
...
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) {
     ...
   }
});
// 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) {
     ...
   }
});
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?