Files
agentic-dev/apps/web-tanstack/src/routes/index.tsx

44 lines
1.2 KiB
TypeScript

import { createFileRoute } from "@tanstack/react-router";
import { useQuery } from "@tanstack/react-query";
import { useTRPC } from "@repo/core-trpc";
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export const Route = createFileRoute("/" as any)({
component: Home,
});
function Home() {
const trpc = useTRPC();
const siteSettings = useQuery(trpc.marketingPages.siteSettings.queryOptions());
const header = useQuery(trpc.navigation.header.queryOptions());
if (siteSettings.isPending || header.isPending) {
return <main>Loading</main>;
}
if (siteSettings.error || header.error) {
return (
<main>
Failed to load: {siteSettings.error?.message ?? header.error?.message}
</main>
);
}
return (
<main>
<header>
<h1>{siteSettings.data?.siteName} TanStack edition</h1>
<nav>
<ul>
{header.data?.items.map((item) => (
<li key={item.href}>
<a href={item.href}>{item.label}</a>
</li>
))}
</ul>
</nav>
</header>
<p>This page is rendered by TanStack Router and consumes the same feature packages as the Next.js app.</p>
</main>
);
}