franpcode/create-better-t-stack
1
0
Fork 0
mirror of https://github.com/FranP-code/create-better-t-stack.git synced 2025-10-12 23:52:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: backend none templates (#241)

Browse Source
This commit is contained in:
Aman Varshney
2025-05-10 08:10:23 +05:30
committed by GitHub
parent 4e4ad2b9ee
commit 8209713bd6
29 changed files with 519 additions and 353 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
apps/cli/templates/frontend/react/next/src/app/page.tsx.hbs
View File

@@ -2,14 +2,14 @@
{{#if (eq backend "convex")}}
import { useQuery } from "convex/react";
import { api } from "@{{projectName}}/backend/convex/_generated/api.js";
{{else}}
{{else if (or (eq api "orpc") (eq api "trpc"))}}
import { useQuery } from "@tanstack/react-query";
{{#if (eq api "orpc")}}
import { orpc } from "@/utils/orpc";
{{/if}}
{{#if (eq api "trpc")}}
import { trpc } from "@/utils/trpc";
{{/if}}
import { useQuery } from "@tanstack/react-query";
{{/if}}
const TITLE_TEXT = `
@@ -43,8 +43,8 @@ export default function Home() {
<div className="grid gap-6">
<section className="rounded-lg border p-4">
<h2 className="mb-2 font-medium">API Status</h2>
{{#if (eq backend "convex")}}
<div className="flex items-center gap-2">
{{#if (eq backend "convex")}}
<div
className={`h-2 w-2 rounded-full ${healthCheck === "OK" ? "bg-green-500" : healthCheck === undefined ? "bg-orange-400" : "bg-red-500"}`}
/>
@@ -55,19 +55,23 @@ export default function Home() {
? "Connected"
: "Error"}
</span>
{{else}}
<div
className={`h-2 w-2 rounded-full ${healthCheck.data ? "bg-green-500" : "bg-red-500"}`}
/>
<span className="text-sm text-muted-foreground">
{healthCheck.isLoading
? "Checking..."
: healthCheck.data
? "Connected"
: "Disconnected"}
</span>
{{/if}}
</div>
{{else}}
{{#unless (eq api "none")}}
<div className="flex items-center gap-2">
<div
className={`h-2 w-2 rounded-full ${healthCheck.data ? "bg-green-500" : "bg-red-500"}`}
/>
<span className="text-sm text-muted-foreground">
{healthCheck.isLoading
? "Checking..."
: healthCheck.data
? "Connected"
: "Disconnected"}
</span>
</div>
{{/unless}}
{{/if}}
</section>
</div>
</div>

67
apps/cli/templates/frontend/react/next/src/components/providers.tsx.hbs
View File

@@ -1,49 +1,50 @@
"use client"
{{#if (eq backend "convex")}}
import { ConvexProvider, ConvexReactClient } from "convex/react";
import { ConvexProvider, ConvexReactClient } from "convex/react";
{{else}}
import { QueryClientProvider } from "@tanstack/react-query";
{{#if (eq api "orpc")}}
import { orpc, ORPCContext, queryClient } from "@/utils/orpc";
{{/if}}
{{#if (eq api "trpc")}}
import { queryClient } from "@/utils/trpc";
{{/if}}
{{#unless (eq api "none")}}
import { QueryClientProvider } from "@tanstack/react-query";
{{#if (eq api "orpc")}}
import { orpc, ORPCContext, queryClient } from "@/utils/orpc";
{{/if}}
{{#if (eq api "trpc")}}
import { queryClient } from "@/utils/trpc";
{{/if}}
{{/unless}}
{{/if}}
import { ThemeProvider } from "./theme-provider";
import { Toaster } from "./ui/sonner";
{{#if (eq backend "convex")}}
const convex = new ConvexReactClient(process.env.NEXT_PUBLIC_CONVEX_URL!);
const convex = new ConvexReactClient(process.env.NEXT_PUBLIC_CONVEX_URL!);
{{/if}}
export default function Providers({
children,
}: {
children: React.ReactNode
}) {
return (
<ThemeProvider
attribute="class"
defaultTheme="system"
enableSystem
disableTransitionOnChange
>
{{#if (eq backend "convex")}}
<ConvexProvider client={convex}>{children}</ConvexProvider>
{{else}}
export default function Providers({ children, }: { children: React.ReactNode })
{ return (
<ThemeProvider
attribute="class"
defaultTheme="system"
enableSystem
disableTransitionOnChange
>
{{#if (eq backend "convex")}}
<ConvexProvider client={convex}>{children}</ConvexProvider>
{{else}}
{{#unless (eq api "none")}}
<QueryClientProvider client={queryClient}>
{{#if (eq api "orpc")}}
<ORPCContext.Provider value={orpc}>
{children}
</ORPCContext.Provider>
<ORPCContext.Provider value={orpc}>
{children}
</ORPCContext.Provider>
{{/if}}
{{#if (eq api "trpc")}}
{children}
{children}
{{/if}}
</QueryClientProvider>
{{/if}}
<Toaster richColors />
</ThemeProvider>
)
}
{{else}}
{children}
{{/unless}}
{{/if}}
<Toaster richColors />
</ThemeProvider>
) }

104
apps/cli/templates/frontend/react/react-router/src/root.tsx.hbs
View File

@@ -13,20 +13,25 @@ import { ThemeProvider } from "./components/theme-provider";
import { Toaster } from "./components/ui/sonner";
{{#if (eq backend "convex")}}
import { ConvexProvider, ConvexReactClient } from "convex/react";
import { ConvexProvider, ConvexReactClient } from "convex/react";
{{else}}
import { QueryClientProvider } from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
{{#if (eq api "orpc")}}
import { orpc, ORPCContext, queryClient } from "./utils/orpc";
{{/if}}
{{#if (eq api "trpc")}}
import { queryClient } from "./utils/trpc";
{{/if}}
{{#unless (eq api "none")}}
import { QueryClientProvider } from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
{{#if (eq api "orpc")}}
import { orpc, ORPCContext, queryClient } from "./utils/orpc";
{{/if}}
{{#if (eq api "trpc")}}
import { queryClient } from "./utils/trpc";
{{/if}}
{{/unless}}
{{/if}}
export const links: Route.LinksFunction = () => [
{ rel: "preconnect", href: "https://fonts.googleapis.com" },
{
rel: "preconnect",
href: "https://fonts.googleapis.com",
},
{
rel: "preconnect",
href: "https://fonts.gstatic.com",
@@ -57,28 +62,12 @@ export function Layout({ children }: { children: React.ReactNode }) {
}
{{#if (eq backend "convex")}}
export default function App() {
const convex = new ConvexReactClient(
import.meta.env.VITE_CONVEX_URL as string,
);
return (
<ConvexProvider client={convex}>
<ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
<div className="grid grid-rows-[auto_1fr] h-svh">
<Header />
<Outlet />
</div>
<Toaster richColors />
</ThemeProvider>
</ConvexProvider>
);
}
{{else if (eq api "orpc")}}
export default function App() {
return (
<QueryClientProvider client={queryClient}>
<ORPCContext.Provider value={orpc}>
export default function App() {
const convex = new ConvexReactClient(
import.meta.env.VITE_CONVEX_URL as string,
);
return (
<ConvexProvider client={convex}>
<ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
<div className="grid grid-rows-[auto_1fr] h-svh">
<Header />
@@ -86,15 +75,44 @@ export default function App() {
</div>
<Toaster richColors />
</ThemeProvider>
</ORPCContext.Provider>
<ReactQueryDevtools position="bottom" buttonPosition="bottom-right" />
</QueryClientProvider>
);
}
</ConvexProvider>
);
}
{{else if (eq api "orpc")}}
export default function App() {
return (
<QueryClientProvider client={queryClient}>
<ORPCContext.Provider value={orpc}>
<ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
<div className="grid grid-rows-[auto_1fr] h-svh">
<Header />
<Outlet />
</div>
<Toaster richColors />
</ThemeProvider>
</ORPCContext.Provider>
<ReactQueryDevtools position="bottom" buttonPosition="bottom-right" />
</QueryClientProvider>
);
}
{{else if (eq api "trpc")}}
export default function App() {
return (
<QueryClientProvider client={queryClient}>
export default function App() {
return (
<QueryClientProvider client={queryClient}>
<ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
<div className="grid grid-rows-[auto_1fr] h-svh">
<Header />
<Outlet />
</div>
<Toaster richColors />
</ThemeProvider>
<ReactQueryDevtools position="bottom" buttonPosition="bottom-right" />
</QueryClientProvider>
);
}
{{else}}
export default function App() {
return (
<ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
<div className="grid grid-rows-[auto_1fr] h-svh">
<Header />
@@ -102,10 +120,8 @@ export default function App() {
</div>
<Toaster richColors />
</ThemeProvider>
<ReactQueryDevtools position="bottom" buttonPosition="bottom-right" />
</QueryClientProvider>
);
}
);
}
{{/if}}
export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {

38
apps/cli/templates/frontend/react/react-router/src/routes/_index.tsx.hbs
View File

@@ -2,14 +2,14 @@ import type { Route } from "./+types/_index";
{{#if (eq backend "convex")}}
import { useQuery } from "convex/react";
import { api } from "@{{projectName}}/backend/convex/_generated/api.js";
{{else}}
{{else if (or (eq api "orpc") (eq api "trpc"))}}
import { useQuery } from "@tanstack/react-query";
{{#if (eq api "orpc")}}
import { orpc } from "@/utils/orpc";
{{/if}}
{{#if (eq api "trpc")}}
import { trpc } from "@/utils/trpc";
{{/if}}
import { useQuery } from "@tanstack/react-query";
{{/if}}
const TITLE_TEXT = `
@@ -47,8 +47,8 @@ export default function Home() {
<div className="grid gap-6">
<section className="rounded-lg border p-4">
<h2 className="mb-2 font-medium">API Status</h2>
{{#if (eq backend "convex")}}
<div className="flex items-center gap-2">
{{#if (eq backend "convex")}}
<div
className={`h-2 w-2 rounded-full ${healthCheck === "OK" ? "bg-green-500" : healthCheck === undefined ? "bg-orange-400" : "bg-red-500"}`}
/>
@@ -59,21 +59,25 @@ export default function Home() {
? "Connected"
: "Error"}
</span>
{{else}}
<div
className={`h-2 w-2 rounded-full ${
healthCheck.data ? "bg-green-500" : "bg-red-500"
}`}
/>
<span className="text-sm text-muted-foreground">
{healthCheck.isLoading
? "Checking..."
: healthCheck.data
? "Connected"
: "Disconnected"}
</span>
{{/if}}
</div>
{{else}}
{{#unless (eq api "none")}}
<div className="flex items-center gap-2">
<div
className={`h-2 w-2 rounded-full ${
healthCheck.data ? "bg-green-500" : "bg-red-500"
}`}
/>
<span className="text-sm text-muted-foreground">
{healthCheck.isLoading
? "Checking..."
: healthCheck.data
? "Connected"
: "Disconnected"}
</span>
</div>
{{/unless}}
{{/if}}
</section>
</div>
</div>

55
apps/cli/templates/frontend/react/tanstack-router/src/main.tsx.hbs
View File

@@ -2,57 +2,51 @@ import { RouterProvider, createRouter } from "@tanstack/react-router";
import ReactDOM from "react-dom/client";
import Loader from "./components/loader";
import { routeTree } from "./routeTree.gen";
{{#if (eq api "orpc")}}
import { QueryClientProvider } from "@tanstack/react-query";
import { orpc, queryClient } from "./utils/orpc";
import { QueryClientProvider } from "@tanstack/react-query";
import { orpc, queryClient } from "./utils/orpc";
{{/if}}
{{#if (eq api "trpc")}}
import { QueryClientProvider } from "@tanstack/react-query";
import { queryClient, trpc } from "./utils/trpc";
import { QueryClientProvider } from "@tanstack/react-query";
import { queryClient, trpc } from "./utils/trpc";
{{/if}}
{{#if (eq backend "convex")}}
import { ConvexProvider, ConvexReactClient } from "convex/react";
const convex = new ConvexReactClient(import.meta.env.VITE_CONVEX_URL as string);
import { ConvexProvider, ConvexReactClient } from "convex/react";
const convex = new ConvexReactClient(import.meta.env.VITE_CONVEX_URL as string);
{{/if}}
{{#if (eq api "orpc")}}
const router = createRouter({
routeTree,
defaultPreload: "intent",
defaultPendingComponent: () => <Loader />,
{{#if (eq api "orpc")}}
context: { orpc, queryClient },
Wrap: function WrapComponent({ children }) {
Wrap: function WrapComponent({ children }: { children: React.ReactNode }) {
return (
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
<QueryClientProvider client={queryClient}>
{children}
</QueryClientProvider>
);
},
});
{{/if}}
{{#if (eq api "trpc")}}
const router = createRouter({
routeTree,
defaultPreload: "intent",
defaultPendingComponent: () => <Loader />,
{{else if (eq api "trpc")}}
context: { trpc, queryClient },
Wrap: function WrapComponent({ children }) {
Wrap: function WrapComponent({ children }: { children: React.ReactNode }) {
return (
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
<QueryClientProvider client={queryClient}>
{children}
</QueryClientProvider>
);
},
});
{{/if}}
{{#if (eq backend "convex")}}
const router = createRouter({
routeTree,
defaultPreload: "intent",
defaultPendingComponent: () => <Loader />,
{{else if (eq backend "convex")}}
context: {},
Wrap: function WrapComponent({ children }) {
Wrap: function WrapComponent({ children }: { children: React.ReactNode }) {
return <ConvexProvider client={convex}>{children}</ConvexProvider>;
},
{{else}}
context: {},
{{/if}}
});
{{/if}}
declare module "@tanstack/react-router" {
interface Register {
@@ -61,7 +55,10 @@ declare module "@tanstack/react-router" {
}
const rootElement = document.getElementById("app");
if (!rootElement) throw new Error("Root element not found");
if (!rootElement) {
throw new Error("Root element not found");
}
if (!rootElement.innerHTML) {
const root = ReactDOM.createRoot(rootElement);

58
apps/cli/templates/frontend/react/tanstack-router/src/routes/__root.tsx.hbs
View File

@@ -31,14 +31,12 @@ export interface RouterAppContext {
orpc: typeof orpc;
queryClient: QueryClient;
}
{{/if}}
{{#if (eq api "trpc")}}
{{else if (eq api "trpc")}}
export interface RouterAppContext {
trpc: typeof trpc;
queryClient: QueryClient;
}
{{/if}}
{{#if (eq backend "convex")}}
{{else}}
export interface RouterAppContext {}
{{/if}}
@@ -63,18 +61,21 @@ export const Route = createRootRouteWithContext<RouterAppContext>()({
}),
});
{{#if (eq api "orpc")}}
function RootComponent() {
const [client] = useState<RouterClient<typeof appRouter>>(() => createORPCClient(link))
const [orpc] = useState(() => createORPCReactQueryUtils(client))
const isFetching = useRouterState({
select: (s) => s.isLoading,
});
{{#if (eq api "orpc")}}
const [client] = useState<RouterClient<typeof appRouter>>(() => createORPCClient(link));
const [orpcUtils] = useState(() => createORPCReactQueryUtils(client));
{{/if}}
return (
<>
<HeadContent />
<ORPCContext.Provider value={orpc}>
{{#if (eq api "orpc")}}
<ORPCContext.Provider value={orpcUtils}>
<ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
<div className="grid grid-rows-[auto_1fr] h-svh">
<Header />
@@ -83,20 +84,7 @@ function RootComponent() {
<Toaster richColors />
</ThemeProvider>
</ORPCContext.Provider>
<TanStackRouterDevtools position="bottom-left" />
<ReactQueryDevtools position="bottom" buttonPosition="bottom-right" />
</>
);
}
{{/if}}
{{#if (eq api "trpc")}}
function RootComponent() {
const isFetching = useRouterState({
select: (s) => s.isLoading,
});
return (
<>
<HeadContent />
{{else}}
<ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
<div className="grid grid-rows-[auto_1fr] h-svh">
<Header />
@@ -104,29 +92,11 @@ function RootComponent() {
</div>
<Toaster richColors />
</ThemeProvider>
{{/if}}
<TanStackRouterDevtools position="bottom-left" />
{{#if (or (eq api "orpc") (eq api "trpc"))}}
<ReactQueryDevtools position="bottom" buttonPosition="bottom-right" />
{{/if}}
</>
);
}
{{/if}}
{{#if (eq backend "convex")}}
function RootComponent() {
const isFetching = useRouterState({
select: (s) => s.isLoading,
});
return (
<>
<HeadContent />
<ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
<div className="grid grid-rows-[auto_1fr] h-svh">
<Header />
{isFetching ? <Loader /> : <Outlet />}
</div>
<Toaster richColors />
</ThemeProvider>
<TanStackRouterDevtools position="bottom-left" />
</>
);
}
{{/if}}

31
apps/cli/templates/frontend/react/tanstack-router/src/routes/index.tsx.hbs
View File

@@ -49,20 +49,8 @@ function HomeComponent() {
<div className="grid gap-6">
<section className="rounded-lg border p-4">
<h2 className="mb-2 font-medium">API Status</h2>
{{#if (eq backend "convex")}}
<div className="flex items-center gap-2">
{{#if (or (eq api "orpc") (eq api "trpc"))}}
<div
className={`h-2 w-2 rounded-full ${healthCheck.data ? "bg-green-500" : "bg-red-500"}`}
/>
<span className="text-sm text-muted-foreground">
{healthCheck.isLoading
? "Checking..."
: healthCheck.data
? "Connected"
: "Disconnected"}
</span>
{{/if}}
{{#if (eq backend "convex")}}
<div
className={`h-2 w-2 rounded-full ${healthCheck === "OK" ? "bg-green-500" : healthCheck === undefined ? "bg-orange-400" : "bg-red-500"}`}
/>
@@ -73,8 +61,23 @@ function HomeComponent() {
? "Connected"
: "Error"}
</span>
{{/if}}
</div>
{{else}}
{{#unless (eq api "none")}}
<div className="flex items-center gap-2">
<div
className={`h-2 w-2 rounded-full ${healthCheck.data ? "bg-green-500" : "bg-red-500"}`}
/>
<span className="text-sm text-muted-foreground">
{healthCheck.isLoading
? "Checking..."
: healthCheck.data
? "Connected"
: "Disconnected"}
</span>
</div>
{{/unless}}
{{/if}}
</section>
</div>
</div>

35
apps/cli/templates/frontend/react/tanstack-start/src/router.tsx.hbs
View File

@@ -8,24 +8,20 @@ import { routeTree } from "./routeTree.gen";
import Loader from "./components/loader";
import "./index.css";
{{else}}
import {
QueryCache,
QueryClient,
QueryClientProvider,
} from "@tanstack/react-query";
import { createRouter as createTanstackRouter } from "@tanstack/react-router";
import Loader from "./components/loader";
import "./index.css";
import { routeTree } from "./routeTree.gen";
{{#if (eq api "trpc")}}
import { QueryCache, QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { createTRPCClient, httpBatchLink } from "@trpc/client";
import { createTRPCOptionsProxy } from "@trpc/tanstack-react-query";
import { toast } from "sonner";
import type { AppRouter } from "../../server/src/routers";
import { TRPCProvider } from "./utils/trpc";
{{/if}}
{{#if (eq api "orpc")}}
import { orpc, ORPCContext, queryClient } from "./utils/orpc";
{{else if (eq api "orpc")}}
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { orpc, ORPCContext, queryClient as orpcQueryClient } from "./utils/orpc";
{{/if}}
{{/if}}
@@ -62,7 +58,6 @@ export function createRouter() {
}),
queryClient,
);
return router;
}
{{else}}
@@ -103,6 +98,8 @@ const trpc = createTRPCOptionsProxy({
client: trpcClient,
queryClient: queryClient,
});
{{else if (eq api "orpc")}}
const queryClient = orpcQueryClient;
{{/if}}
export const createRouter = () => {
@@ -112,33 +109,37 @@ export const createRouter = () => {
defaultPreloadStaleTime: 0,
{{#if (eq api "trpc")}}
context: { trpc, queryClient },
{{/if}}
{{#if (eq api "orpc")}}
{{else if (eq api "orpc")}}
context: { orpc, queryClient },
{{else}}
context: { },
{{/if}}
defaultPendingComponent: () => <Loader />,
defaultNotFoundComponent: () => <div>Not Found</div>,
{{#if (eq api "trpc")}}
Wrap: ({ children }) => (
<QueryClientProvider client={queryClient}>
{{#if (eq api "trpc")}}
<TRPCProvider trpcClient={trpcClient} queryClient={queryClient}>
{children}
</TRPCProvider>
{{/if}}
{{#if (eq api "orpc")}}
</QueryClientProvider>
),
{{else if (eq api "orpc")}}
Wrap: ({ children }) => (
<QueryClientProvider client={queryClient}>
<ORPCContext.Provider value={orpc}>
{children}
</ORPCContext.Provider>
{{/if}}
</QueryClientProvider>
),
{{else}}
Wrap: ({ children }) => <>{children}</>,
{{/if}}
});
return router;
};
{{/if}}
// Register the router instance for type safety
declare module "@tanstack/react-router" {
interface Register {
router: ReturnType<typeof createRouter>;

14
apps/cli/templates/frontend/react/tanstack-start/src/routes/__root.tsx.hbs
View File

@@ -1,5 +1,7 @@
import { Toaster } from "@/components/ui/sonner";
{{#unless (eq backend "convex")}} {{#unless (eq api "none")}}
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
{{/unless}} {{/unless}}
import {
HeadContent,
Outlet,
@@ -10,7 +12,9 @@ import {
import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
import Header from "../components/header";
import appCss from "../index.css?url";
{{#unless (and (eq api "none") (not (eq backend "convex"))}}
import type { QueryClient } from "@tanstack/react-query";
{{/unless}}
import Loader from "@/components/loader";
{{#if (eq backend "convex")}}
@@ -25,12 +29,14 @@ export interface RouterAppContext {
trpc: TRPCOptionsProxy<AppRouter>;
queryClient: QueryClient;
}
{{/if}}
{{#if (eq api "orpc")}}
{{else if (eq api "orpc")}}
import type { orpc } from "@/utils/orpc";
export interface RouterAppContext {
orpc: typeof orpc;
queryClient: QueryClient;
}
{{else}}
export interface RouterAppContext {
}
{{/if}}
{{/if}}
@@ -75,7 +81,11 @@ function RootDocument() {
</div>
<Toaster richColors />
<TanStackRouterDevtools position="bottom-left" />
{{#unless (eq backend "convex")}}
{{#unless (eq api "none")}}
<ReactQueryDevtools position="bottom" buttonPosition="bottom-right" />
{{/unless}}
{{/unless}}
<Scripts />
</body>
</html>

41
apps/cli/templates/frontend/react/tanstack-start/src/routes/index.tsx.hbs
View File

@@ -3,14 +3,14 @@ import { createFileRoute } from "@tanstack/react-router";
import { convexQuery } from "@convex-dev/react-query";
import { useSuspenseQuery } from "@tanstack/react-query";
import { api } from "@{{projectName}}/backend/convex/_generated/api.js";
{{else}}
{{else if (or (eq api "trpc") (eq api "orpc"))}}
import { useQuery } from "@tanstack/react-query";
{{#if (eq api "trpc")}}
import { useTRPC } from "@/utils/trpc";
{{/if}}
{{#if (eq api "orpc")}}
import { useORPC } from "@/utils/orpc";
{{/if}}
import { useQuery } from "@tanstack/react-query";
{{/if}}
export const Route = createFileRoute("/")({
@@ -36,15 +36,12 @@ const TITLE_TEXT = `
function HomeComponent() {
{{#if (eq backend "convex")}}
const healthCheck = useSuspenseQuery(convexQuery(api.healthCheck.get, {}));
{{else}}
{{#if (eq api "trpc")}}
{{else if (eq api "trpc")}}
const trpc = useTRPC();
const healthCheck = useQuery(trpc.healthCheck.queryOptions());
{{/if}}
{{#if (eq api "orpc")}}
{{else if (eq api "orpc")}}
const orpc = useORPC();
const healthCheck = useQuery(orpc.healthCheck.queryOptions());
{{/if}}
{{/if}}
return (
@@ -53,8 +50,8 @@ function HomeComponent() {
<div className="grid gap-6">
<section className="rounded-lg border p-4">
<h2 className="mb-2 font-medium">API Status</h2>
{{#if (eq backend "convex")}}
<div className="flex items-center gap-2">
{{#if (eq backend "convex")}}
<div
className={`h-2 w-2 rounded-full ${healthCheck.data === "OK" ? "bg-green-500" : healthCheck.isLoading ? "bg-orange-400" : "bg-red-500"}`}
/>
@@ -65,19 +62,23 @@ function HomeComponent() {
? "Connected"
: "Error"}
</span>
{{else}}
<div
className={`h-2 w-2 rounded-full ${healthCheck.data ? "bg-green-500" : "bg-red-500"}`}
/>
<span className="text-muted-foreground text-sm">
{healthCheck.isLoading
? "Checking..."
: healthCheck.data
? "Connected"
: "Disconnected"}
</span>
{{/if}}
</div>
{{else}}
{{#unless (eq api "none")}}
<div className="flex items-center gap-2">
<div
className={`h-2 w-2 rounded-full ${healthCheck.data ? "bg-green-500" : "bg-red-500"}`}
/>
<span className="text-muted-foreground text-sm">
{healthCheck.isLoading
? "Checking..."
: healthCheck.data
? "Connected"
: "Disconnected"}
</span>
</div>
{{/unless}}
{{/if}}
</section>
</div>
</div>