_root.tsx
```
export const Route = createRootRouteWithContext<{
  queryClient: QueryClient;
  trpcClient: TRPCClient;
  trpc: TRPCClientOptionsProxy;
  authData: AuthData | undefined;
  authenticated: boolean;
}>()({
  beforeLoad: async () => {
    const authData = await getAuthData();
    return {
      authData,
      authenticated: Boolean(authData),
    };
  },
  loader: async ({ context }) => {
    const { trpc, queryClient, authenticated } = context;

    if (authenticated) {
      await queryClient.ensureQueryData(trpc.currentUser.get.queryOptions());
    }
  },
```

Index route:
```

export const Route = createFileRoute("/_main/")({
  component: Home,
  loader: async ({ context }) => {
    const { trpc, queryClient } = context;
    queryClient.prefetchQuery(upcomingMeetingsQueryOptions(trpc));
  },
});

function Home() {
  return (
    <main id="main-content">
      <HomeHero />
      <UpcomingMeetingSection />
      <GetInvolvedSection />
    </main>
  );
}
```

in the component tree: 

```
function UpcomingMeetingList() {
  const trpc = useTRPC();
  const { data: meetings } = useSuspenseQuery(upcomingMeetingsQueryOptions(trpc));

  return <MeetingList meetings={meetings} />;
}

export function UpcomingMeetingSection() {
  return (
    <section className="bg-background-2 py-16 sm:py-32">
      <div className="px-6">
        <h2 className="text-center text-2xl font-bold sm:text-3xl">Upcoming Meetings</h2>
        <p className="text-foreground mt-2.5 text-center">Meetings happening now or starting soon</p>
        <MeetingStateLegend className="my-6" />
      </div>
      <div className="mx-auto my-16 max-w-2xl px-4">
        <Card data-panel-background="translucent">
          <Suspense fallback={<MeetingListSkeleton />}>
            <QueryErrorResetBoundary>
              {({ reset }) => (
                <ErrorBoundary
                  onReset={reset}
                  fallbackRender={({ resetErrorBoundary }) => (
                    <div>
                      <p>Error loading meetings</p>
                      <Button onClick={() => resetErrorBoundary()}>Try again</Button>
                    </div>
                  )}
                >
                  <UpcomingMeetingList />
                </ErrorBoundary>
              )}
            </QueryErrorResetBoundary>
          </Suspense>
        </Card>
        <div className="my-16 flex justify-center">
          <Button variant="ghost" size="xl" radius="lg" className="p-8 text-xl" highContrast asChild>
            <Link to="/meetings">View full schedule</Link>
          </Button>
        </div>
      </div>
    </section>
  );
}
```