mirror of
https://github.com/FranP-code/create-better-t-stack.git
synced 2025-10-12 23:52:15 +00:00
add convex
This commit is contained in:
Aman Varshney
@@ -14,7 +14,6 @@
|
||||
"@radix-ui/react-label": "^2.1.3",
|
||||
"@radix-ui/react-slot": "^1.2.0",
|
||||
"@tanstack/react-form": "^1.3.2",
|
||||
"@tanstack/react-query": "^5.72.2",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
"lucide-react": "^0.487.0",
|
||||
@@ -29,7 +28,6 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/postcss": "^4",
|
||||
"@tanstack/react-query-devtools": "^5.72.2",
|
||||
"@types/node": "^20",
|
||||
"@types/react": "^19",
|
||||
"@types/react-dom": "^19",
|
||||
|
||||
@@ -1,11 +1,16 @@
|
||||
"use client"
|
||||
{{#if (eq api "orpc")}}
|
||||
{{#if (eq backend "convex")}}
|
||||
import { useQuery } from "convex/react";
|
||||
import { api } from "@{{projectName}}/backend/convex/_generated/api.js";
|
||||
{{else}}
|
||||
{{#if (eq api "orpc")}}
|
||||
import { orpc } from "@/utils/orpc";
|
||||
{{/if}}
|
||||
{{#if (eq api "trpc")}}
|
||||
{{/if}}
|
||||
{{#if (eq api "trpc")}}
|
||||
import { trpc } from "@/utils/trpc";
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
{{/if}}
|
||||
|
||||
const TITLE_TEXT = `
|
||||
██████╗ ███████╗████████╗████████╗███████╗██████╗
|
||||
@@ -24,10 +29,11 @@ const TITLE_TEXT = `
|
||||
`;
|
||||
|
||||
export default function Home() {
|
||||
{{#if (eq api "orpc")}}
|
||||
{{#if (eq backend "convex")}}
|
||||
const healthCheck = useQuery(api.healthCheck.get);
|
||||
{{else if (eq api "orpc")}}
|
||||
const healthCheck = useQuery(orpc.healthCheck.queryOptions());
|
||||
{{/if}}
|
||||
{{#if (eq api "trpc")}}
|
||||
{{else if (eq api "trpc")}}
|
||||
const healthCheck = useQuery(trpc.healthCheck.queryOptions());
|
||||
{{/if}}
|
||||
|
||||
@@ -38,6 +44,18 @@ export default function Home() {
|
||||
<section className="rounded-lg border p-4">
|
||||
<h2 className="mb-2 font-medium">API Status</h2>
|
||||
<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"}`}
|
||||
/>
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{healthCheck === undefined
|
||||
? "Checking..."
|
||||
: healthCheck === "OK"
|
||||
? "Connected"
|
||||
: "Error"}
|
||||
</span>
|
||||
{{else}}
|
||||
<div
|
||||
className={`h-2 w-2 rounded-full ${healthCheck.data ? "bg-green-500" : "bg-red-500"}`}
|
||||
/>
|
||||
@@ -48,46 +66,10 @@ export default function Home() {
|
||||
? "Connected"
|
||||
: "Disconnected"}
|
||||
</span>
|
||||
{{/if}}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="mb-3 font-medium">Core Features</h2>
|
||||
<ul className="grid grid-cols-2 gap-3">
|
||||
<FeatureItem
|
||||
title="Type-Safe API"
|
||||
description="End-to-end type safety with tRPC"
|
||||
/>
|
||||
<FeatureItem
|
||||
title="Modern React"
|
||||
description="TanStack Router + TanStack Query"
|
||||
/>
|
||||
<FeatureItem
|
||||
title="Fast Backend"
|
||||
description="Lightweight Hono server"
|
||||
/>
|
||||
<FeatureItem
|
||||
title="Beautiful UI"
|
||||
description="TailwindCSS + shadcn/ui components"
|
||||
/>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function FeatureItem({
|
||||
title,
|
||||
description,
|
||||
}: {
|
||||
title: string;
|
||||
description: string;
|
||||
}) {
|
||||
return (
|
||||
<li className="border-l-2 border-primary py-1 pl-3">
|
||||
<h3 className="font-medium">{title}</h3>
|
||||
<p className="text-sm text-muted-foreground">{description}</p>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,14 +1,22 @@
|
||||
"use client"
|
||||
{{#if (eq backend "convex")}}
|
||||
import { ConvexProvider, ConvexReactClient } from "convex/react";
|
||||
{{else}}
|
||||
import { QueryClientProvider } from "@tanstack/react-query";
|
||||
{{#if (eq api "orpc")}}
|
||||
{{#if (eq api "orpc")}}
|
||||
import { orpc, ORPCContext, queryClient } from "@/utils/orpc";
|
||||
{{/if}}
|
||||
{{#if (eq api "trpc")}}
|
||||
{{/if}}
|
||||
{{#if (eq api "trpc")}}
|
||||
import { queryClient } from "@/utils/trpc";
|
||||
{{/if}}
|
||||
{{/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!);
|
||||
{{/if}}
|
||||
|
||||
export default function Providers({
|
||||
children,
|
||||
}: {
|
||||
@@ -21,6 +29,9 @@ export default function Providers({
|
||||
enableSystem
|
||||
disableTransitionOnChange
|
||||
>
|
||||
{{#if (eq backend "convex")}}
|
||||
<ConvexProvider client={convex}>{children}</ConvexProvider>
|
||||
{{else}}
|
||||
<QueryClientProvider client={queryClient}>
|
||||
{{#if (eq api "orpc")}}
|
||||
<ORPCContext.Provider value={orpc}>
|
||||
@@ -31,6 +42,7 @@ export default function Providers({
|
||||
{children}
|
||||
{{/if}}
|
||||
</QueryClientProvider>
|
||||
{{/if}}
|
||||
<Toaster richColors />
|
||||
</ThemeProvider>
|
||||
)
|
||||
|
||||
@@ -17,7 +17,6 @@
|
||||
"@react-router/node": "^7.4.1",
|
||||
"@react-router/serve": "^7.4.1",
|
||||
"@tanstack/react-form": "^1.2.3",
|
||||
"@tanstack/react-query": "^5.71.3",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
"isbot": "^5.1.17",
|
||||
@@ -34,7 +33,6 @@
|
||||
"devDependencies": {
|
||||
"@react-router/dev": "^7.4.1",
|
||||
"@tailwindcss/vite": "^4.0.0",
|
||||
"@tanstack/react-query-devtools": "^5.71.3",
|
||||
"@types/node": "^20",
|
||||
"@types/react": "^19.0.1",
|
||||
"@types/react-dom": "^19.0.1",
|
||||
|
||||
@@ -1,5 +1,3 @@
|
||||
import { QueryClientProvider } from "@tanstack/react-query";
|
||||
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
|
||||
import {
|
||||
isRouteErrorResponse,
|
||||
Links,
|
||||
@@ -14,11 +12,17 @@ import Header from "./components/header";
|
||||
import { ThemeProvider } from "./components/theme-provider";
|
||||
import { Toaster } from "./components/ui/sonner";
|
||||
|
||||
{{#if (eq api "orpc")}}
|
||||
import { orpc, ORPCContext, queryClient } from "./utils/orpc";
|
||||
{{/if}}
|
||||
{{#if (eq api "trpc")}}
|
||||
import { queryClient } from "./utils/trpc";
|
||||
{{#if (eq backend "convex")}}
|
||||
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}}
|
||||
{{/if}}
|
||||
|
||||
export const links: Route.LinksFunction = () => [
|
||||
@@ -52,7 +56,25 @@ export function Layout({ children }: { children: React.ReactNode }) {
|
||||
);
|
||||
}
|
||||
|
||||
{{#if (eq api "orpc")}}
|
||||
{{#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}>
|
||||
@@ -69,9 +91,7 @@ export default function App() {
|
||||
</QueryClientProvider>
|
||||
);
|
||||
}
|
||||
{{/if}}
|
||||
|
||||
{{#if (eq api "trpc")}}
|
||||
{{else if (eq api "trpc")}}
|
||||
export default function App() {
|
||||
return (
|
||||
<QueryClientProvider client={queryClient}>
|
||||
|
||||
@@ -1,11 +1,16 @@
|
||||
import type { Route } from "./+types/_index";
|
||||
{{#if (eq api "orpc")}}
|
||||
import { orpc } from "@/utils/orpc";
|
||||
{{/if}}
|
||||
{{#if (eq api "trpc")}}
|
||||
import { trpc } from "@/utils/trpc";
|
||||
{{/if}}
|
||||
{{#if (eq backend "convex")}}
|
||||
import { useQuery } from "convex/react";
|
||||
import { api } from "@{{projectName}}/backend/convex/_generated/api.js";
|
||||
{{else}}
|
||||
{{#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 = `
|
||||
██████╗ ███████╗████████╗████████╗███████╗██████╗
|
||||
@@ -28,11 +33,11 @@ export function meta({}: Route.MetaArgs) {
|
||||
}
|
||||
|
||||
export default function Home() {
|
||||
|
||||
{{#if (eq api "orpc")}}
|
||||
{{#if (eq backend "convex")}}
|
||||
const healthCheck = useQuery(api.healthCheck.get);
|
||||
{{else if (eq api "orpc")}}
|
||||
const healthCheck = useQuery(orpc.healthCheck.queryOptions());
|
||||
{{/if}}
|
||||
{{#if (eq api "trpc")}}
|
||||
{{else if (eq api "trpc")}}
|
||||
const healthCheck = useQuery(trpc.healthCheck.queryOptions());
|
||||
{{/if}}
|
||||
|
||||
@@ -43,6 +48,18 @@ export default function Home() {
|
||||
<section className="rounded-lg border p-4">
|
||||
<h2 className="mb-2 font-medium">API Status</h2>
|
||||
<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"}`}
|
||||
/>
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{healthCheck === undefined
|
||||
? "Checking..."
|
||||
: healthCheck === "OK"
|
||||
? "Connected"
|
||||
: "Error"}
|
||||
</span>
|
||||
{{else}}
|
||||
<div
|
||||
className={`h-2 w-2 rounded-full ${
|
||||
healthCheck.data ? "bg-green-500" : "bg-red-500"
|
||||
@@ -55,46 +72,10 @@ export default function Home() {
|
||||
? "Connected"
|
||||
: "Disconnected"}
|
||||
</span>
|
||||
{{/if}}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="mb-3 font-medium">Core Features</h2>
|
||||
<ul className="grid grid-cols-2 gap-3">
|
||||
<FeatureItem
|
||||
title="Type-Safe API"
|
||||
description="End-to-end type safety with tRPC"
|
||||
/>
|
||||
<FeatureItem
|
||||
title="Modern React"
|
||||
description="TanStack Router + TanStack Query"
|
||||
/>
|
||||
<FeatureItem
|
||||
title="Fast Backend"
|
||||
description="Lightweight Hono server"
|
||||
/>
|
||||
<FeatureItem
|
||||
title="Beautiful UI"
|
||||
description="TailwindCSS + shadcn/ui components"
|
||||
/>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function FeatureItem({
|
||||
title,
|
||||
description,
|
||||
}: {
|
||||
title: string;
|
||||
description: string;
|
||||
}) {
|
||||
return (
|
||||
<li className="border-l-2 border-primary py-1 pl-3">
|
||||
<h3 className="font-medium">{title}</h3>
|
||||
<p className="text-sm text-muted-foreground">{description}</p>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -11,7 +11,6 @@
|
||||
"check-types": "tsc --noEmit"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tanstack/react-query-devtools": "^5.69.0",
|
||||
"@tanstack/react-router-devtools": "^1.114.27",
|
||||
"@tanstack/router-plugin": "^1.114.27",
|
||||
"@types/node": "^22.13.13",
|
||||
@@ -30,7 +29,6 @@
|
||||
"@radix-ui/react-slot": "^1.1.2",
|
||||
"@tanstack/react-form": "^1.0.5",
|
||||
"@tailwindcss/vite": "^4.0.15",
|
||||
"@tanstack/react-query": "^5.69.0",
|
||||
"@tanstack/react-router": "^1.114.25",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
|
||||
@@ -1,14 +1,20 @@
|
||||
import { QueryClientProvider } from "@tanstack/react-query";
|
||||
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";
|
||||
{{/if}}
|
||||
{{#if (eq api "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);
|
||||
{{/if}}
|
||||
|
||||
{{#if (eq api "orpc")}}
|
||||
const router = createRouter({
|
||||
@@ -36,8 +42,18 @@ const router = createRouter({
|
||||
},
|
||||
});
|
||||
{{/if}}
|
||||
{{#if (eq backend "convex")}}
|
||||
const router = createRouter({
|
||||
routeTree,
|
||||
defaultPreload: "intent",
|
||||
defaultPendingComponent: () => <Loader />,
|
||||
context: {},
|
||||
Wrap: function WrapComponent({ children }) {
|
||||
return <ConvexProvider client={convex}>{children}</ConvexProvider>;
|
||||
},
|
||||
});
|
||||
{{/if}}
|
||||
|
||||
// Register things for typesafety
|
||||
declare module "@tanstack/react-router" {
|
||||
interface Register {
|
||||
router: typeof router;
|
||||
|
||||
@@ -38,6 +38,9 @@ export interface RouterAppContext {
|
||||
queryClient: QueryClient;
|
||||
}
|
||||
{{/if}}
|
||||
{{#if (eq backend "convex")}}
|
||||
export interface RouterAppContext {}
|
||||
{{/if}}
|
||||
|
||||
export const Route = createRootRouteWithContext<RouterAppContext>()({
|
||||
component: RootComponent,
|
||||
@@ -106,4 +109,24 @@ function RootComponent() {
|
||||
</>
|
||||
);
|
||||
}
|
||||
{{/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}}
|
||||
|
||||
@@ -1,11 +1,16 @@
|
||||
import { createFileRoute } from "@tanstack/react-router";
|
||||
{{#if (eq api "orpc")}}
|
||||
import { orpc } from "@/utils/orpc";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
{{/if}}
|
||||
{{#if (eq api "trpc")}}
|
||||
import { trpc } from "@/utils/trpc";
|
||||
{{/if}}
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { createFileRoute } from "@tanstack/react-router";
|
||||
{{/if}}
|
||||
{{#if (eq backend "convex")}}
|
||||
import { useQuery } from "convex/react";
|
||||
import { api } from "@{{ projectName }}/backend/convex/_generated/api.js";
|
||||
{{/if}}
|
||||
|
||||
export const Route = createFileRoute("/")({
|
||||
component: HomeComponent,
|
||||
@@ -34,6 +39,9 @@ function HomeComponent() {
|
||||
{{#if (eq api "trpc")}}
|
||||
const healthCheck = useQuery(trpc.healthCheck.queryOptions());
|
||||
{{/if}}
|
||||
{{#if (eq backend "convex")}}
|
||||
const healthCheck = useQuery(api.healthCheck.get);
|
||||
{{/if}}
|
||||
|
||||
return (
|
||||
<div className="container mx-auto max-w-3xl px-4 py-2">
|
||||
@@ -42,6 +50,7 @@ function HomeComponent() {
|
||||
<section className="rounded-lg border p-4">
|
||||
<h2 className="mb-2 font-medium">API Status</h2>
|
||||
<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"}`}
|
||||
/>
|
||||
@@ -52,46 +61,22 @@ function HomeComponent() {
|
||||
? "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"}`}
|
||||
/>
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{healthCheck === undefined
|
||||
? "Checking..."
|
||||
: healthCheck === "OK"
|
||||
? "Connected"
|
||||
: "Error"}
|
||||
</span>
|
||||
{{/if}}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="mb-3 font-medium">Core Features</h2>
|
||||
<ul className="grid grid-cols-2 gap-3">
|
||||
<FeatureItem
|
||||
title="Type-Safe API"
|
||||
description="End-to-end type safety with tRPC"
|
||||
/>
|
||||
<FeatureItem
|
||||
title="Modern React"
|
||||
description="TanStack Router + TanStack Query"
|
||||
/>
|
||||
<FeatureItem
|
||||
title="Fast Backend"
|
||||
description="Lightweight Hono server"
|
||||
/>
|
||||
<FeatureItem
|
||||
title="Beautiful UI"
|
||||
description="TailwindCSS + shadcn/ui components"
|
||||
/>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function FeatureItem({
|
||||
title,
|
||||
description,
|
||||
}: {
|
||||
title: string;
|
||||
description: string;
|
||||
}) {
|
||||
return (
|
||||
<li className="border-l-2 border-primary py-1 pl-3">
|
||||
<h3 className="font-medium">{title}</h3>
|
||||
<p className="text-sm text-muted-foreground">{description}</p>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,3 +1,13 @@
|
||||
{{#if (eq backend "convex")}}
|
||||
import { createRouter as createTanStackRouter } from "@tanstack/react-router";
|
||||
import { QueryClient } from "@tanstack/react-query";
|
||||
import { routerWithQueryClient } from "@tanstack/react-router-with-query";
|
||||
import { ConvexQueryClient } from "@convex-dev/react-query";
|
||||
import { ConvexProvider } from "convex/react";
|
||||
import { routeTree } from "./routeTree.gen";
|
||||
import Loader from "./components/loader";
|
||||
import "./index.css";
|
||||
{{else}}
|
||||
import {
|
||||
QueryCache,
|
||||
QueryClient,
|
||||
@@ -7,18 +17,56 @@ 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")}}
|
||||
{{#if (eq api "trpc")}}
|
||||
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")}}
|
||||
{{/if}}
|
||||
{{#if (eq api "orpc")}}
|
||||
import { orpc, ORPCContext, queryClient } from "./utils/orpc";
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
|
||||
{{#if (eq api "trpc")}}
|
||||
{{#if (eq backend "convex")}}
|
||||
export function createRouter() {
|
||||
const CONVEX_URL = (import.meta as any).env.VITE_CONVEX_URL!;
|
||||
if (!CONVEX_URL) {
|
||||
console.error("missing envar VITE_CONVEX_URL");
|
||||
}
|
||||
const convexQueryClient = new ConvexQueryClient(CONVEX_URL);
|
||||
|
||||
const queryClient: QueryClient = new QueryClient({
|
||||
defaultOptions: {
|
||||
queries: {
|
||||
queryKeyHashFn: convexQueryClient.hashFn(),
|
||||
queryFn: convexQueryClient.queryFn(),
|
||||
},
|
||||
},
|
||||
});
|
||||
convexQueryClient.connect(queryClient);
|
||||
|
||||
const router = routerWithQueryClient(
|
||||
createTanStackRouter({
|
||||
routeTree,
|
||||
defaultPreload: "intent",
|
||||
defaultPendingComponent: () => <Loader />,
|
||||
defaultNotFoundComponent: () => <div>Not Found</div>,
|
||||
context: { queryClient },
|
||||
Wrap: ({ children }) => (
|
||||
<ConvexProvider client={convexQueryClient.convexClient}>
|
||||
{children}
|
||||
</ConvexProvider>
|
||||
),
|
||||
}),
|
||||
queryClient,
|
||||
);
|
||||
|
||||
return router;
|
||||
}
|
||||
{{else}}
|
||||
{{#if (eq api "trpc")}}
|
||||
export const queryClient = new QueryClient({
|
||||
queryCache: new QueryCache({
|
||||
onError: (error) => {
|
||||
@@ -38,11 +86,7 @@ export const queryClient = new QueryClient({
|
||||
const trpcClient = createTRPCClient<AppRouter>({
|
||||
links: [
|
||||
httpBatchLink({
|
||||
{{#if (includes frontend 'next')}}
|
||||
url: `${process.env.NEXT_PUBLIC_SERVER_URL}/trpc`,
|
||||
{{else}}
|
||||
url: `${import.meta.env.VITE_SERVER_URL}/trpc`,
|
||||
{{/if}}
|
||||
{{#if auth}}
|
||||
fetch(url, options) {
|
||||
return fetch(url, {
|
||||
@@ -59,8 +103,7 @@ const trpc = createTRPCOptionsProxy({
|
||||
client: trpcClient,
|
||||
queryClient: queryClient,
|
||||
});
|
||||
{{/if}}
|
||||
|
||||
{{/if}}
|
||||
|
||||
export const createRouter = () => {
|
||||
const router = createTanstackRouter({
|
||||
@@ -69,10 +112,10 @@ export const createRouter = () => {
|
||||
defaultPreloadStaleTime: 0,
|
||||
{{#if (eq api "trpc")}}
|
||||
context: { trpc, queryClient },
|
||||
{{/if}}
|
||||
{{#if (eq api "orpc")}}
|
||||
{{/if}}
|
||||
{{#if (eq api "orpc")}}
|
||||
context: { orpc, queryClient },
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
defaultPendingComponent: () => <Loader />,
|
||||
defaultNotFoundComponent: () => <div>Not Found</div>,
|
||||
Wrap: ({ children }) => (
|
||||
@@ -93,6 +136,7 @@ export const createRouter = () => {
|
||||
|
||||
return router;
|
||||
};
|
||||
{{/if}}
|
||||
|
||||
// Register the router instance for type safety
|
||||
declare module "@tanstack/react-router" {
|
||||
|
||||
@@ -11,26 +11,28 @@ import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
|
||||
import Header from "../components/header";
|
||||
import appCss from "../index.css?url";
|
||||
import type { QueryClient } from "@tanstack/react-query";
|
||||
{{#if (eq api "trpc")}}
|
||||
import type { TRPCOptionsProxy } from "@trpc/tanstack-react-query";
|
||||
import type { AppRouter } from "../../../server/src/routers";
|
||||
{{/if}}
|
||||
{{#if (eq api "orpc")}}
|
||||
import type { orpc } from "@/utils/orpc";
|
||||
{{/if}}
|
||||
import Loader from "@/components/loader";
|
||||
|
||||
{{#if (eq api "trpc")}}
|
||||
{{#if (eq backend "convex")}}
|
||||
export interface RouterAppContext {
|
||||
queryClient: QueryClient;
|
||||
}
|
||||
{{else}}
|
||||
{{#if (eq api "trpc")}}
|
||||
import type { TRPCOptionsProxy } from "@trpc/tanstack-react-query";
|
||||
import type { AppRouter } from "../../../server/src/routers";
|
||||
export interface RouterAppContext {
|
||||
trpc: TRPCOptionsProxy<AppRouter>;
|
||||
queryClient: QueryClient;
|
||||
}
|
||||
{{/if}}
|
||||
{{#if (eq api "orpc")}}
|
||||
{{/if}}
|
||||
{{#if (eq api "orpc")}}
|
||||
import type { orpc } from "@/utils/orpc";
|
||||
export interface RouterAppContext {
|
||||
orpc: typeof orpc;
|
||||
queryClient: QueryClient;
|
||||
}
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
|
||||
export const Route = createRootRouteWithContext<RouterAppContext>()({
|
||||
|
||||
@@ -1,11 +1,17 @@
|
||||
{{#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";
|
||||
import { createFileRoute } from "@tanstack/react-router";
|
||||
{{#if (eq backend "convex")}}
|
||||
import { convexQuery } from "@convex-dev/react-query";
|
||||
import { useSuspenseQuery } from "@tanstack/react-query";
|
||||
import { api } from "@{{projectName}}/backend/convex/_generated/api.js";
|
||||
{{else}}
|
||||
{{#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("/")({
|
||||
component: HomeComponent,
|
||||
@@ -28,13 +34,17 @@ const TITLE_TEXT = `
|
||||
`;
|
||||
|
||||
function HomeComponent() {
|
||||
{{#if (eq api "trpc")}}
|
||||
{{#if (eq backend "convex")}}
|
||||
const healthCheck = useSuspenseQuery(convexQuery(api.healthCheck.get, {}));
|
||||
{{else}}
|
||||
{{#if (eq api "trpc")}}
|
||||
const trpc = useTRPC();
|
||||
const healthCheck = useQuery(trpc.healthCheck.queryOptions());
|
||||
{{/if}}
|
||||
{{#if (eq api "orpc")}}
|
||||
{{/if}}
|
||||
{{#if (eq api "orpc")}}
|
||||
const orpc = useORPC();
|
||||
const healthCheck = useQuery(orpc.healthCheck.queryOptions());
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
|
||||
return (
|
||||
@@ -44,6 +54,18 @@ function HomeComponent() {
|
||||
<section className="rounded-lg border p-4">
|
||||
<h2 className="mb-2 font-medium">API Status</h2>
|
||||
<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"}`}
|
||||
/>
|
||||
<span className="text-muted-foreground text-sm">
|
||||
{healthCheck.isLoading
|
||||
? "Checking..."
|
||||
: healthCheck.data === "OK"
|
||||
? "Connected"
|
||||
: "Error"}
|
||||
</span>
|
||||
{{else}}
|
||||
<div
|
||||
className={`h-2 w-2 rounded-full ${healthCheck.data ? "bg-green-500" : "bg-red-500"}`}
|
||||
/>
|
||||
@@ -54,46 +76,10 @@ function HomeComponent() {
|
||||
? "Connected"
|
||||
: "Disconnected"}
|
||||
</span>
|
||||
{{/if}}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="mb-3 font-medium">Core Features</h2>
|
||||
<ul className="grid grid-cols-2 gap-3">
|
||||
<FeatureItem
|
||||
title="Type-Safe API"
|
||||
description="End-to-end type safety with tRPC"
|
||||
/>
|
||||
<FeatureItem
|
||||
title="Modern React"
|
||||
description="TanStack Router + TanStack Query"
|
||||
/>
|
||||
<FeatureItem
|
||||
title="Fast Backend"
|
||||
description="Lightweight Hono server"
|
||||
/>
|
||||
<FeatureItem
|
||||
title="Beautiful UI"
|
||||
description="TailwindCSS + shadcn/ui components"
|
||||
/>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function FeatureItem({
|
||||
title,
|
||||
description,
|
||||
}: {
|
||||
title: string;
|
||||
description: string;
|
||||
}) {
|
||||
return (
|
||||
<li className="border-primary border-l-2 py-1 pl-3">
|
||||
<h3 className="font-medium">{title}</h3>
|
||||
<p className="text-muted-foreground text-sm">{description}</p>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user