fix orpc templates (#302)

2025-10-12 23:52:15 +00:00 · 2025-06-05 21:46:13 +05:30
parent a8ef5e8928
commit 2e6454ab33
15 changed files with 124 additions and 163 deletions
--- a/.changeset/olive-mails-eat.md
+++ b/.changeset/olive-mails-eat.md
@@ -0,0 +1,5 @@
+---
+"create-better-t-stack": patch
+---
+
+Improve oRPC templates
--- a/apps/cli/src/constants.ts
+++ b/apps/cli/src/constants.ts
@@ -100,8 +100,8 @@ export const dependencyVersionMap = {
 	"convex-svelte": "^0.0.11",

 	"@tanstack/svelte-query": "^5.74.4",
-	"@tanstack/react-query-devtools": "^5.69.0",
-	"@tanstack/react-query": "^5.69.0",
+	"@tanstack/react-query-devtools": "^5.80.5",
+	"@tanstack/react-query": "^5.80.5",

 	"@tanstack/solid-query": "^5.75.0",
 	"@tanstack/solid-query-devtools": "^5.75.0",
--- a/apps/cli/templates/api/orpc/native/utils/orpc.ts.hbs
+++ b/apps/cli/templates/api/orpc/native/utils/orpc.ts.hbs
@@ -1,17 +1,13 @@
 import { createORPCClient } from "@orpc/client";
 import { RPCLink } from "@orpc/client/fetch";
 import { createTanstackQueryUtils } from "@orpc/tanstack-query";
-import type { RouterUtils } from "@orpc/tanstack-query";
 import type { RouterClient } from "@orpc/server";
 import { QueryCache, QueryClient } from "@tanstack/react-query";
-import { createContext, useContext } from "react";
 import type { appRouter } from "../../server/src/routers";
 {{#if auth}}
 import { authClient } from "@/lib/auth-client";
 {{/if}}

-type ORPCReactUtils = RouterUtils<RouterClient<typeof appRouter>>;
-
 export const queryClient = new QueryClient({
  queryCache: new QueryCache({
    onError: (error) => {
@@ -37,13 +33,3 @@ export const link = new RPCLink({
 export const client: RouterClient<typeof appRouter> = createORPCClient(link);

 export const orpc = createTanstackQueryUtils(client);
-
-export const ORPCContext = createContext<ORPCReactUtils | undefined>(undefined);
-
-export function useORPC(): ORPCReactUtils {
-  const orpc = useContext(ORPCContext);
-  if (!orpc) {
-    throw new Error("ORPCContext is not set up properly");
-  }
-  return orpc;
-}
--- a/apps/cli/templates/api/orpc/server/base/src/lib/orpc.ts.hbs
+++ b/apps/cli/templates/api/orpc/server/base/src/lib/orpc.ts.hbs
@@ -12,7 +12,6 @@ const requireAuth = o.middleware(async ({ context, next }) => {
  }
  return next({
    context: {
-      ...context,
      session: context.session,
    },
  });
--- a/apps/cli/templates/api/orpc/web/react/base/src/utils/orpc.ts.hbs
+++ b/apps/cli/templates/api/orpc/web/react/base/src/utils/orpc.ts.hbs
@@ -5,10 +5,6 @@ import { QueryCache, QueryClient } from "@tanstack/react-query";
 import { toast } from "sonner";
 import type { appRouter } from "../../../server/src/routers/index";
 import type { RouterClient } from "@orpc/server";
-import { createContext, use } from 'react'
-import type { RouterUtils } from '@orpc/tanstack-query'
-
-type ORPCReactUtils = RouterUtils<RouterClient<typeof appRouter>>

 export const queryClient = new QueryClient({
  queryCache: new QueryCache({
@@ -44,14 +40,3 @@ export const link = new RPCLink({
 export const client: RouterClient<typeof appRouter> = createORPCClient(link)

 export const orpc = createTanstackQueryUtils(client)
-
-
-export const ORPCContext = createContext<ORPCReactUtils | undefined>(undefined)
-
-export function useORPC(): ORPCReactUtils {
-  const orpc = use(ORPCContext)
-  if (!orpc) {
-    throw new Error('ORPCContext is not set up properly')
-  }
-  return orpc
-}
--- a/apps/cli/templates/auth/web/react/tanstack-start/src/routes/dashboard.tsx.hbs
+++ b/apps/cli/templates/auth/web/react/tanstack-start/src/routes/dashboard.tsx.hbs
@@ -3,7 +3,7 @@ import { authClient } from "@/lib/auth-client";
 import { useTRPC } from "@/utils/trpc";
 {{/if}}
 {{#if (eq api "orpc")}}
-import { useORPC } from "@/utils/orpc";
+import { orpc } from "@/utils/orpc";
 {{/if}}
 import { useQuery } from "@tanstack/react-query";
 import { createFileRoute } from "@tanstack/react-router";
@@ -19,7 +19,6 @@ function RouteComponent() {
  const trpc = useTRPC();
  {{/if}}
  {{#if (eq api "orpc")}}
-  const orpc = useORPC();
  {{/if}}
  const { data: session, isPending } = authClient.useSession();

--- a/apps/cli/templates/examples/todo/web/react/tanstack-start/src/routes/todos.tsx.hbs
+++ b/apps/cli/templates/examples/todo/web/react/tanstack-start/src/routes/todos.tsx.hbs
@@ -19,12 +19,12 @@ import { useMutation } from "convex/react";
 import { api } from "@{{projectName}}/backend/convex/_generated/api";
 import type { Id } from "@{{projectName}}/backend/convex/_generated/dataModel";
 {{else}}
-  {{#if (eq api "trpc")}}
+{{#if (eq api "trpc")}}
 import { useTRPC } from "@/utils/trpc";
-  {{/if}}
-  {{#if (eq api "orpc")}}
-import { useORPC } from "@/utils/orpc";
-  {{/if}}
+{{/if}}
+{{#if (eq api "orpc")}}
+import { orpc } from "@/utils/orpc";
+{{/if}}
 import { useMutation, useQuery } from "@tanstack/react-query";
 {{/if}}

@@ -77,7 +77,6 @@ function TodosRoute() {
  const trpc = useTRPC();
    {{/if}}
    {{#if (eq api "orpc")}}
-  const orpc = useORPC();
    {{/if}}

    {{#if (eq api "trpc")}}
--- a/apps/cli/templates/frontend/react/next/src/components/providers.tsx.hbs
+++ b/apps/cli/templates/frontend/react/next/src/components/providers.tsx.hbs
@@ -1,28 +1,32 @@
 "use client";

 {{#if (eq backend "convex")}}
-  import { ConvexProvider, ConvexReactClient } from "convex/react";
+import { ConvexProvider, ConvexReactClient } from "convex/react";
 {{else}}
-  {{#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}}
+{{#unless (eq api "none")}}
+import { QueryClientProvider } from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+{{#if (eq api "orpc")}}
+import { 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 (
+export default function Providers({
+  children
+}: {
+  children: React.ReactNode
+}) {
+  return (
    <ThemeProvider
      attribute="class"
      defaultTheme="system"
@@ -30,23 +34,21 @@ export default function Providers({ children }: { children: React.ReactNode }) {
      disableTransitionOnChange
    >
      {{#if (eq backend "convex")}}
-        <ConvexProvider client={convex}>{children}</ConvexProvider>
+      <ConvexProvider client={convex}>{children}</ConvexProvider>
      {{else}}
-        {{#unless (eq api "none")}}
-          <QueryClientProvider client={queryClient}>
-            {{#if (eq api "orpc")}}
-              <ORPCContext.Provider value={orpc}>
-                {children}
-              </ORPCContext.Provider>
-            {{/if}}
-            {{#if (eq api "trpc")}}
-              {children}
-            {{/if}}
-            <ReactQueryDevtools />
-          </QueryClientProvider>
-        {{else}}
-          {children}
-        {{/unless}}
+      {{#unless (eq api "none")}}
+      <QueryClientProvider client={queryClient}>
+        {{#if (eq api "orpc")}}
+        {children}
+        {{/if}}
+        {{#if (eq api "trpc")}}
+        {children}
+        {{/if}}
+        <ReactQueryDevtools />
+      </QueryClientProvider>
+      {{else}}
+      {children}
+      {{/unless}}
      {{/if}}
      <Toaster richColors />
    </ThemeProvider>
--- a/apps/cli/templates/frontend/react/react-router/src/root.tsx.hbs
+++ b/apps/cli/templates/frontend/react/react-router/src/root.tsx.hbs
@@ -13,18 +13,18 @@ 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}}
-  {{#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}}
+{{#unless (eq api "none")}}
+import { QueryClientProvider } from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+{{#if (eq api "orpc")}}
+import { queryClient } from "./utils/orpc";
+{{/if}}
+{{#if (eq api "trpc")}}
+import { queryClient } from "./utils/trpc";
+{{/if}}
+{{/unless}}
 {{/if}}

 export const links: Route.LinksFunction = () => [
@@ -62,57 +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}>
-          <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}>
-        <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 (
+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 />
@@ -120,8 +75,51 @@ export function Layout({ children }: { children: React.ReactNode }) {
        </div>
        <Toaster richColors />
      </ThemeProvider>
-    );
-  }
+    </ConvexProvider>
+  );
+}
+{{else if (eq api "orpc")}}
+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 if (eq api "trpc")}}
+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 />
+        <Outlet />
+      </div>
+      <Toaster richColors />
+    </ThemeProvider>
+  );
+}
 {{/if}}

 export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
--- a/apps/cli/templates/frontend/react/tanstack-router/src/routes/__root.tsx.hbs
+++ b/apps/cli/templates/frontend/react/tanstack-router/src/routes/__root.tsx.hbs
@@ -75,7 +75,6 @@ function RootComponent() {
    <>
      <HeadContent />
      {{#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,7 +82,6 @@ function RootComponent() {
          </div>
          <Toaster richColors />
        </ThemeProvider>
-      </ORPCContext.Provider>
      {{else}}
      <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
        <div className="grid grid-rows-[auto_1fr] h-svh">
--- a/apps/cli/templates/frontend/react/tanstack-start/package.json
+++ b/apps/cli/templates/frontend/react/tanstack-start/package.json
@@ -14,18 +14,18 @@
    "@radix-ui/react-label": "^2.1.2",
    "@radix-ui/react-slot": "^1.1.2",
    "@tanstack/react-form": "^1.0.5",
-    "@tailwindcss/vite": "^4.0.6",
-    "@tanstack/react-query": "^5.71.10",
-    "@tanstack/react-router": "^1.114.3",
-    "@tanstack/react-router-with-query": "^1.114.3",
-    "@tanstack/react-start": "^1.114.3",
-    "@tanstack/router-plugin": "^1.114.3",
+    "@tailwindcss/vite": "^4.1.8",
+    "@tanstack/react-query": "^5.80.5",
+    "@tanstack/react-router": "^1.120.15",
+    "@tanstack/react-router-with-query": "^1.120.15",
+    "@tanstack/react-start": "^1.120.15",
+    "@tanstack/router-plugin": "^1.120.15",
    "class-variance-authority": "^0.7.1",
 		"clsx": "^2.1.1",
    "lucide-react": "^0.473.0",
    "next-themes": "^0.4.6",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
    "sonner": "^2.0.3",
    "tailwindcss": "^4.1.3",
    "tailwind-merge": "^2.6.0",
@@ -35,15 +35,15 @@
    "zod": "^3.25.16"
  },
  "devDependencies": {
-    "@tanstack/react-router-devtools": "^1.114.3",
+    "@tanstack/react-router-devtools": "^1.120.15",
    "@testing-library/dom": "^10.4.0",
    "@testing-library/react": "^16.2.0",
-    "@types/react": "^19.0.8",
-    "@types/react-dom": "^19.0.3",
+    "@types/react": "^19.1.6",
+    "@types/react-dom": "^19.1.6",
    "@vitejs/plugin-react": "^4.3.4",
    "jsdom": "^26.0.0",
    "typescript": "^5.7.2",
-    "vite": "^6.1.0",
+    "vite": "^6.3.5",
    "web-vitals": "^4.2.4"
  }
 }
--- a/apps/cli/templates/frontend/react/tanstack-start/src/router.tsx.hbs
+++ b/apps/cli/templates/frontend/react/tanstack-start/src/router.tsx.hbs
@@ -20,8 +20,8 @@ import { toast } from "sonner";
 import type { AppRouter } from "../../server/src/routers";
 import { TRPCProvider } from "./utils/trpc";
  {{else if (eq api "orpc")}}
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { orpc, ORPCContext, queryClient as orpcQueryClient } from "./utils/orpc";
+import { QueryClientProvider } from "@tanstack/react-query";
+import { orpc, queryClient } from "./utils/orpc";
  {{/if}}
 {{/if}}

@@ -99,7 +99,6 @@ const trpc = createTRPCOptionsProxy({
  queryClient: queryClient,
 });
  {{else if (eq api "orpc")}}
-  const queryClient = orpcQueryClient;
  {{/if}}

 export const createRouter = () => {
@@ -127,9 +126,7 @@ export const createRouter = () => {
    {{else if (eq api "orpc")}}
    Wrap: ({ children }) => (
      <QueryClientProvider client={queryClient}>
-        <ORPCContext.Provider value={orpc}>
-          {children}
-        </ORPCContext.Provider>
+        {children}
      </QueryClientProvider>
    ),
    {{else}}
--- a/apps/cli/templates/frontend/react/tanstack-start/src/routes/index.tsx.hbs
+++ b/apps/cli/templates/frontend/react/tanstack-start/src/routes/index.tsx.hbs
@@ -9,7 +9,7 @@ import { useQuery } from "@tanstack/react-query";
 import { useTRPC } from "@/utils/trpc";
  {{/if}}
  {{#if (eq api "orpc")}}
-import { useORPC } from "@/utils/orpc";
+import { orpc } from "@/utils/orpc";
  {{/if}}
 {{/if}}

@@ -40,7 +40,6 @@ function HomeComponent() {
  const trpc = useTRPC();
  const healthCheck = useQuery(trpc.healthCheck.queryOptions());
  {{else if (eq api "orpc")}}
-  const orpc = useORPC();
  const healthCheck = useQuery(orpc.healthCheck.queryOptions());
  {{/if}}

--- a/apps/cli/templates/frontend/solid/package.json
+++ b/apps/cli/templates/frontend/solid/package.json
@@ -9,17 +9,11 @@
    "test": "vitest run"
  },
  "dependencies": {
-    "@orpc/client": "^1.1.1",
-    "@orpc/server": "^1.1.1",
-    "@orpc/solid-query": "^1.1.1",
    "@tailwindcss/vite": "^4.0.6",
    "@tanstack/router-plugin": "^1.109.2",
    "@tanstack/solid-form": "^1.9.0",
-    "@tanstack/solid-query": "^5.75.0",
-    "@tanstack/solid-query-devtools": "^5.75.0",
    "@tanstack/solid-router": "^1.110.0",
    "@tanstack/solid-router-devtools": "^1.109.2",
-    "better-auth": "^1.2.7",
    "lucide-solid": "^0.507.0",
    "solid-js": "^1.9.4",
    "tailwindcss": "^4.0.6",
--- a/bun.lock
+++ b/bun.lock
@@ -14,7 +14,7 @@
    },
    "apps/cli": {
      "name": "create-better-t-stack",
-      "version": "2.14.4",
+      "version": "2.16.0",
      "bin": {
        "create-better-t-stack": "dist/index.js",
      },