create-better-t-stack 1.2.0 → 1.3.0

package/template/base/apps/{client → web}/package.json

@@ -1,5 +1,5 @@
 {
-	"name": "client",
+	"name": "web",
 	"version": "0.0.0",
 	"private": true,
 	"type": "module",

package/template/base/apps/web/src/main.tsx

@@ -0,0 +1,33 @@
+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";
+import { queryClient, trpcClient } from "./utils/trpc";
+
+const router = createRouter({
+  routeTree,
+  defaultPreload: "intent",
+  defaultPendingComponent: () => <Loader />,
+  context: { trpcClient },
+  Wrap: function WrapComponent({ children }) {
+    return (
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    );
+  },
+});
+
+// Register things for typesafety
+declare module "@tanstack/react-router" {
+  interface Register {
+    router: typeof router;
+  }
+}
+
+const rootElement = document.getElementById("app");
+if (!rootElement) throw new Error("Root element not found");
+
+if (!rootElement.innerHTML) {
+  const root = ReactDOM.createRoot(rootElement);
+  root.render(<RouterProvider router={router} />);
+}

package/template/base/apps/{client → web}/src/routes/__root.tsx

@@ -2,19 +2,19 @@ import Header from "@/components/header";
 import Loader from "@/components/loader";
 import { ThemeProvider } from "@/components/theme-provider";
 import { Toaster } from "@/components/ui/sonner";
-import { trpcQueryUtils } from "@/main";
+import type { trpcClient } from "@/utils/trpc";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import {
+  HeadContent,
   Outlet,
   createRootRouteWithContext,
   useRouterState,
-  HeadContent,
 } from "@tanstack/react-router";
 import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
 import "../index.css";
 
 export interface RouterAppContext {
-  trpcQueryUtils: typeof trpcQueryUtils;
+  trpcClient: typeof trpcClient;
 }
 
 export const Route = createRootRouteWithContext<RouterAppContext>()({

package/template/base/apps/{client → web}/src/routes/index.tsx

@@ -1,7 +1,8 @@
+import { Button } from "@/components/ui/button";
 import { trpc } from "@/utils/trpc";
-import { createFileRoute, Link } from "@tanstack/react-router";
+import { useQuery } from "@tanstack/react-query";
+import { Link, createFileRoute } from "@tanstack/react-router";
 import { ArrowRight } from "lucide-react";
-import { Button } from "@/components/ui/button";
 
 export const Route = createFileRoute("/")({
   component: HomeComponent,
@@ -24,7 +25,7 @@ const TITLE_TEXT = `
  `;
 
 function HomeComponent() {
-  const healthCheck = trpc.healthCheck.useQuery();
+  const healthCheck = useQuery(trpc.healthCheck.queryOptions());
 
   return (
     <div className="container mx-auto max-w-3xl px-4 py-2">
@@ -33,9 +34,9 @@ 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">
-           	<div
-							className={`h-2 w-2 rounded-full ${healthCheck.data ? "bg-green-500" : "bg-red-500"}`}
-						/>
+            <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..."

package/template/base/apps/web/src/utils/trpc.ts

@@ -0,0 +1,33 @@
+import type { AppRouter } from "../../../server/src/routers";
+import { QueryCache, QueryClient } from "@tanstack/react-query";
+import { createTRPCClient, httpBatchLink } from "@trpc/client";
+import { createTRPCOptionsProxy } from "@trpc/tanstack-react-query";
+import { toast } from "sonner";
+
+export const queryClient = new QueryClient({
+  queryCache: new QueryCache({
+    onError: (error) => {
+      toast.error(error.message, {
+        action: {
+          label: "retry",
+          onClick: () => {
+            queryClient.invalidateQueries();
+          },
+        },
+      });
+    },
+  }),
+});
+
+export const trpcClient = createTRPCClient<AppRouter>({
+  links: [
+    httpBatchLink({
+      url: `${import.meta.env.VITE_SERVER_URL}/trpc`,
+    }),
+  ],
+});
+
+export const trpc = createTRPCOptionsProxy<AppRouter>({
+  client: trpcClient,
+  queryClient,
+});

package/template/base/package.json

@@ -6,7 +6,8 @@
 		"dev": "turbo dev",
 		"build": "turbo build",
 		"check-types": "turbo check-types",
-		"dev:client": "turbo -F client dev",
+		"dev:native": "turbo -F native dev",
+		"dev:web": "turbo -F web dev",
 		"dev:server": "turbo -F server dev",
 		"db:push": "turbo -F server db:push",
 		"db:studio": "turbo -F server db:studio"

package/template/with-auth/apps/{client → web}/src/routes/dashboard.tsx

@@ -1,5 +1,6 @@
 import { authClient } from "@/lib/auth-client";
 import { trpc } from "@/utils/trpc";
+import { useQuery } from "@tanstack/react-query";
 import { createFileRoute } from "@tanstack/react-router";
 import { useEffect } from "react";
 
@@ -12,7 +13,7 @@ function RouteComponent() {
 
   const navigate = Route.useNavigate();
 
-  const privateData = trpc.privateData.useQuery();
+  const privateData = useQuery(trpc.privateData.queryOptions());
 
   useEffect(() => {
     if (!session && !isPending) {

package/template/with-auth/apps/web/src/utils/trpc.ts

@@ -0,0 +1,39 @@
+import type { AppRouter } from "../../../server/src/routers";
+import { QueryCache, QueryClient } from "@tanstack/react-query";
+import { createTRPCClient, httpBatchLink } from "@trpc/client";
+import { createTRPCOptionsProxy } from "@trpc/tanstack-react-query";
+import { toast } from "sonner";
+
+export const queryClient = new QueryClient({
+  queryCache: new QueryCache({
+    onError: (error) => {
+      toast.error(error.message, {
+        action: {
+          label: "retry",
+          onClick: () => {
+            queryClient.invalidateQueries();
+          },
+        },
+      });
+    },
+  }),
+});
+
+export const trpcClient = createTRPCClient<AppRouter>({
+  links: [
+    httpBatchLink({
+      url: `${import.meta.env.VITE_SERVER_URL}/trpc`,
+      fetch(url, options) {
+        return fetch(url, {
+          ...options,
+          credentials: "include",
+        });
+      },
+    }),
+  ],
+});
+
+export const trpc = createTRPCOptionsProxy<AppRouter>({
+  client: trpcClient,
+  queryClient,
+});

package/template/base/apps/client/src/main.tsx

@@ -1,72 +0,0 @@
-import {
-	QueryCache,
-	QueryClient,
-	QueryClientProvider,
-} from "@tanstack/react-query";
-import { RouterProvider, createRouter } from "@tanstack/react-router";
-import { httpBatchLink } from "@trpc/client";
-import { createTRPCQueryUtils } from "@trpc/react-query";
-import ReactDOM from "react-dom/client";
-import { toast } from "sonner";
-import Loader from "./components/loader";
-import { routeTree } from "./routeTree.gen";
-import { trpc } from "./utils/trpc";
-
-const queryClient = new QueryClient({
-	queryCache: new QueryCache({
-		onError: (error) => {
-			toast.error(error.message, {
-				action: {
-					label: "retry",
-					onClick: () => {
-						queryClient.invalidateQueries();
-					},
-				},
-			});
-		},
-	}),
-});
-
-const trpcClient = trpc.createClient({
-	links: [
-		httpBatchLink({
-			url: `${import.meta.env.VITE_SERVER_URL}/trpc`,
-		}),
-	],
-});
-
-export const trpcQueryUtils = createTRPCQueryUtils({
-	queryClient,
-	client: trpcClient,
-});
-
-const router = createRouter({
-	routeTree,
-	defaultPreload: "intent",
-	context: { trpcQueryUtils },
-	defaultPendingComponent: () => <Loader />,
-	Wrap: function WrapComponent({ children }) {
-		return (
-			<trpc.Provider client={trpcClient} queryClient={queryClient}>
-				<QueryClientProvider client={queryClient}>
-					{children}
-				</QueryClientProvider>
-			</trpc.Provider>
-		);
-	},
-});
-
-// Register things for typesafety
-declare module "@tanstack/react-router" {
-	interface Register {
-		router: typeof router;
-	}
-}
-
-const rootElement = document.getElementById("app");
-if (!rootElement) throw new Error("Root element not found");
-
-if (!rootElement.innerHTML) {
-	const root = ReactDOM.createRoot(rootElement);
-	root.render(<RouterProvider router={router} />);
-}

package/template/base/apps/client/src/utils/trpc.ts

@@ -1,4 +0,0 @@
-import { createTRPCReact } from "@trpc/react-query";
-import type { AppRouter } from "../../../server/src/routers";
-
-export const trpc = createTRPCReact<AppRouter>();

package/template/with-auth/apps/client/src/main.tsx

@@ -1,78 +0,0 @@
-import {
-	QueryCache,
-	QueryClient,
-	QueryClientProvider,
-} from "@tanstack/react-query";
-import { RouterProvider, createRouter } from "@tanstack/react-router";
-import { httpBatchLink } from "@trpc/client";
-import { createTRPCQueryUtils } from "@trpc/react-query";
-import ReactDOM from "react-dom/client";
-import { toast } from "sonner";
-import Loader from "./components/loader";
-import { routeTree } from "./routeTree.gen";
-import { trpc } from "./utils/trpc";
-
-const queryClient = new QueryClient({
-	queryCache: new QueryCache({
-		onError: (error) => {
-			toast.error(error.message, {
-				action: {
-					label: "retry",
-					onClick: () => {
-						queryClient.invalidateQueries();
-					},
-				},
-			});
-		},
-	}),
-});
-
-const trpcClient = trpc.createClient({
-	links: [
-		httpBatchLink({
-			url: `${import.meta.env.VITE_SERVER_URL}/trpc`,
-			fetch(url, options) {
-				return fetch(url, {
-					...options,
-					credentials: "include",
-				});
-			},
-		}),
-	],
-});
-
-export const trpcQueryUtils = createTRPCQueryUtils({
-	queryClient,
-	client: trpcClient,
-});
-
-const router = createRouter({
-	routeTree,
-	defaultPreload: "intent",
-	context: { trpcQueryUtils },
-	defaultPendingComponent: () => <Loader />,
-	Wrap: function WrapComponent({ children }) {
-		return (
-			<trpc.Provider client={trpcClient} queryClient={queryClient}>
-				<QueryClientProvider client={queryClient}>
-					{children}
-				</QueryClientProvider>
-			</trpc.Provider>
-		);
-	},
-});
-
-// Register things for typesafety
-declare module "@tanstack/react-router" {
-	interface Register {
-		router: typeof router;
-	}
-}
-
-const rootElement = document.getElementById("app");
-if (!rootElement) throw new Error("Root element not found");
-
-if (!rootElement.innerHTML) {
-	const root = ReactDOM.createRoot(rootElement);
-	root.render(<RouterProvider router={router} />);
-}