fix orpc templates (#302)

This commit is contained in:
Aman Varshney
2025-06-05 21:46:13 +05:30
parent a8ef5e8928
commit 2e6454ab33
15 changed files with 124 additions and 163 deletions

View File

@@ -0,0 +1,5 @@
---
"create-better-t-stack": patch
---
Improve oRPC templates

View File

@@ -100,8 +100,8 @@ export const dependencyVersionMap = {
"convex-svelte": "^0.0.11", "convex-svelte": "^0.0.11",
"@tanstack/svelte-query": "^5.74.4", "@tanstack/svelte-query": "^5.74.4",
"@tanstack/react-query-devtools": "^5.69.0", "@tanstack/react-query-devtools": "^5.80.5",
"@tanstack/react-query": "^5.69.0", "@tanstack/react-query": "^5.80.5",
"@tanstack/solid-query": "^5.75.0", "@tanstack/solid-query": "^5.75.0",
"@tanstack/solid-query-devtools": "^5.75.0", "@tanstack/solid-query-devtools": "^5.75.0",

View File

@@ -1,17 +1,13 @@
import { createORPCClient } from "@orpc/client"; import { createORPCClient } from "@orpc/client";
import { RPCLink } from "@orpc/client/fetch"; import { RPCLink } from "@orpc/client/fetch";
import { createTanstackQueryUtils } from "@orpc/tanstack-query"; import { createTanstackQueryUtils } from "@orpc/tanstack-query";
import type { RouterUtils } from "@orpc/tanstack-query";
import type { RouterClient } from "@orpc/server"; import type { RouterClient } from "@orpc/server";
import { QueryCache, QueryClient } from "@tanstack/react-query"; import { QueryCache, QueryClient } from "@tanstack/react-query";
import { createContext, useContext } from "react";
import type { appRouter } from "../../server/src/routers"; import type { appRouter } from "../../server/src/routers";
{{#if auth}} {{#if auth}}
import { authClient } from "@/lib/auth-client"; import { authClient } from "@/lib/auth-client";
{{/if}} {{/if}}
type ORPCReactUtils = RouterUtils<RouterClient<typeof appRouter>>;
export const queryClient = new QueryClient({ export const queryClient = new QueryClient({
queryCache: new QueryCache({ queryCache: new QueryCache({
onError: (error) => { onError: (error) => {
@@ -37,13 +33,3 @@ export const link = new RPCLink({
export const client: RouterClient<typeof appRouter> = createORPCClient(link); export const client: RouterClient<typeof appRouter> = createORPCClient(link);
export const orpc = createTanstackQueryUtils(client); 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;
}

View File

@@ -12,7 +12,6 @@ const requireAuth = o.middleware(async ({ context, next }) => {
} }
return next({ return next({
context: { context: {
...context,
session: context.session, session: context.session,
}, },
}); });

View File

@@ -5,10 +5,6 @@ import { QueryCache, QueryClient } from "@tanstack/react-query";
import { toast } from "sonner"; import { toast } from "sonner";
import type { appRouter } from "../../../server/src/routers/index"; import type { appRouter } from "../../../server/src/routers/index";
import type { RouterClient } from "@orpc/server"; 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({ export const queryClient = new QueryClient({
queryCache: new QueryCache({ queryCache: new QueryCache({
@@ -44,14 +40,3 @@ export const link = new RPCLink({
export const client: RouterClient<typeof appRouter> = createORPCClient(link) export const client: RouterClient<typeof appRouter> = createORPCClient(link)
export const orpc = createTanstackQueryUtils(client) 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
}

View File

@@ -3,7 +3,7 @@ import { authClient } from "@/lib/auth-client";
import { useTRPC } from "@/utils/trpc"; import { useTRPC } from "@/utils/trpc";
{{/if}} {{/if}}
{{#if (eq api "orpc")}} {{#if (eq api "orpc")}}
import { useORPC } from "@/utils/orpc"; import { orpc } from "@/utils/orpc";
{{/if}} {{/if}}
import { useQuery } from "@tanstack/react-query"; import { useQuery } from "@tanstack/react-query";
import { createFileRoute } from "@tanstack/react-router"; import { createFileRoute } from "@tanstack/react-router";
@@ -19,7 +19,6 @@ function RouteComponent() {
const trpc = useTRPC(); const trpc = useTRPC();
{{/if}} {{/if}}
{{#if (eq api "orpc")}} {{#if (eq api "orpc")}}
const orpc = useORPC();
{{/if}} {{/if}}
const { data: session, isPending } = authClient.useSession(); const { data: session, isPending } = authClient.useSession();

View File

@@ -23,7 +23,7 @@ import type { Id } from "@{{projectName}}/backend/convex/_generated/dataModel";
import { useTRPC } from "@/utils/trpc"; import { useTRPC } from "@/utils/trpc";
{{/if}} {{/if}}
{{#if (eq api "orpc")}} {{#if (eq api "orpc")}}
import { useORPC } from "@/utils/orpc"; import { orpc } from "@/utils/orpc";
{{/if}} {{/if}}
import { useMutation, useQuery } from "@tanstack/react-query"; import { useMutation, useQuery } from "@tanstack/react-query";
{{/if}} {{/if}}
@@ -77,7 +77,6 @@ function TodosRoute() {
const trpc = useTRPC(); const trpc = useTRPC();
{{/if}} {{/if}}
{{#if (eq api "orpc")}} {{#if (eq api "orpc")}}
const orpc = useORPC();
{{/if}} {{/if}}
{{#if (eq api "trpc")}} {{#if (eq api "trpc")}}

View File

@@ -7,14 +7,13 @@
import { QueryClientProvider } from "@tanstack/react-query"; import { QueryClientProvider } from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools"; import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
{{#if (eq api "orpc")}} {{#if (eq api "orpc")}}
import { orpc, ORPCContext, queryClient } from "@/utils/orpc"; import { queryClient } from "@/utils/orpc";
{{/if}} {{/if}}
{{#if (eq api "trpc")}} {{#if (eq api "trpc")}}
import { queryClient } from "@/utils/trpc"; import { queryClient } from "@/utils/trpc";
{{/if}} {{/if}}
{{/unless}} {{/unless}}
{{/if}} {{/if}}
import { ThemeProvider } from "./theme-provider"; import { ThemeProvider } from "./theme-provider";
import { Toaster } from "./ui/sonner"; import { Toaster } from "./ui/sonner";
@@ -22,7 +21,12 @@ import { Toaster } from "./ui/sonner";
const convex = new ConvexReactClient(process.env.NEXT_PUBLIC_CONVEX_URL!); const convex = new ConvexReactClient(process.env.NEXT_PUBLIC_CONVEX_URL!);
{{/if}} {{/if}}
export default function Providers({ children }: { children: React.ReactNode }) { return ( export default function Providers({
children
}: {
children: React.ReactNode
}) {
return (
<ThemeProvider <ThemeProvider
attribute="class" attribute="class"
defaultTheme="system" defaultTheme="system"
@@ -35,9 +39,7 @@ export default function Providers({ children }: { children: React.ReactNode }) {
{{#unless (eq api "none")}} {{#unless (eq api "none")}}
<QueryClientProvider client={queryClient}> <QueryClientProvider client={queryClient}>
{{#if (eq api "orpc")}} {{#if (eq api "orpc")}}
<ORPCContext.Provider value={orpc}>
{children} {children}
</ORPCContext.Provider>
{{/if}} {{/if}}
{{#if (eq api "trpc")}} {{#if (eq api "trpc")}}
{children} {children}

View File

@@ -19,7 +19,7 @@ import { Toaster } from "./components/ui/sonner";
import { QueryClientProvider } from "@tanstack/react-query"; import { QueryClientProvider } from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools"; import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
{{#if (eq api "orpc")}} {{#if (eq api "orpc")}}
import { orpc, ORPCContext, queryClient } from "./utils/orpc"; import { queryClient } from "./utils/orpc";
{{/if}} {{/if}}
{{#if (eq api "trpc")}} {{#if (eq api "trpc")}}
import { queryClient } from "./utils/trpc"; import { queryClient } from "./utils/trpc";
@@ -82,7 +82,6 @@ export function Layout({ children }: { children: React.ReactNode }) {
export default function App() { export default function App() {
return ( return (
<QueryClientProvider client={queryClient}> <QueryClientProvider client={queryClient}>
<ORPCContext.Provider value={orpc}>
<ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme"> <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
<div className="grid grid-rows-[auto_1fr] h-svh"> <div className="grid grid-rows-[auto_1fr] h-svh">
<Header /> <Header />
@@ -90,7 +89,6 @@ export function Layout({ children }: { children: React.ReactNode }) {
</div> </div>
<Toaster richColors /> <Toaster richColors />
</ThemeProvider> </ThemeProvider>
</ORPCContext.Provider>
<ReactQueryDevtools position="bottom" buttonPosition="bottom-right" /> <ReactQueryDevtools position="bottom" buttonPosition="bottom-right" />
</QueryClientProvider> </QueryClientProvider>
); );

View File

@@ -75,7 +75,6 @@ function RootComponent() {
<> <>
<HeadContent /> <HeadContent />
{{#if (eq api "orpc")}} {{#if (eq api "orpc")}}
<ORPCContext.Provider value={orpcUtils}>
<ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme"> <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
<div className="grid grid-rows-[auto_1fr] h-svh"> <div className="grid grid-rows-[auto_1fr] h-svh">
<Header /> <Header />
@@ -83,7 +82,6 @@ function RootComponent() {
</div> </div>
<Toaster richColors /> <Toaster richColors />
</ThemeProvider> </ThemeProvider>
</ORPCContext.Provider>
{{else}} {{else}}
<ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme"> <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
<div className="grid grid-rows-[auto_1fr] h-svh"> <div className="grid grid-rows-[auto_1fr] h-svh">

View File

@@ -14,18 +14,18 @@
"@radix-ui/react-label": "^2.1.2", "@radix-ui/react-label": "^2.1.2",
"@radix-ui/react-slot": "^1.1.2", "@radix-ui/react-slot": "^1.1.2",
"@tanstack/react-form": "^1.0.5", "@tanstack/react-form": "^1.0.5",
"@tailwindcss/vite": "^4.0.6", "@tailwindcss/vite": "^4.1.8",
"@tanstack/react-query": "^5.71.10", "@tanstack/react-query": "^5.80.5",
"@tanstack/react-router": "^1.114.3", "@tanstack/react-router": "^1.120.15",
"@tanstack/react-router-with-query": "^1.114.3", "@tanstack/react-router-with-query": "^1.120.15",
"@tanstack/react-start": "^1.114.3", "@tanstack/react-start": "^1.120.15",
"@tanstack/router-plugin": "^1.114.3", "@tanstack/router-plugin": "^1.120.15",
"class-variance-authority": "^0.7.1", "class-variance-authority": "^0.7.1",
"clsx": "^2.1.1", "clsx": "^2.1.1",
"lucide-react": "^0.473.0", "lucide-react": "^0.473.0",
"next-themes": "^0.4.6", "next-themes": "^0.4.6",
"react": "^19.0.0", "react": "^19.1.0",
"react-dom": "^19.0.0", "react-dom": "^19.1.0",
"sonner": "^2.0.3", "sonner": "^2.0.3",
"tailwindcss": "^4.1.3", "tailwindcss": "^4.1.3",
"tailwind-merge": "^2.6.0", "tailwind-merge": "^2.6.0",
@@ -35,15 +35,15 @@
"zod": "^3.25.16" "zod": "^3.25.16"
}, },
"devDependencies": { "devDependencies": {
"@tanstack/react-router-devtools": "^1.114.3", "@tanstack/react-router-devtools": "^1.120.15",
"@testing-library/dom": "^10.4.0", "@testing-library/dom": "^10.4.0",
"@testing-library/react": "^16.2.0", "@testing-library/react": "^16.2.0",
"@types/react": "^19.0.8", "@types/react": "^19.1.6",
"@types/react-dom": "^19.0.3", "@types/react-dom": "^19.1.6",
"@vitejs/plugin-react": "^4.3.4", "@vitejs/plugin-react": "^4.3.4",
"jsdom": "^26.0.0", "jsdom": "^26.0.0",
"typescript": "^5.7.2", "typescript": "^5.7.2",
"vite": "^6.1.0", "vite": "^6.3.5",
"web-vitals": "^4.2.4" "web-vitals": "^4.2.4"
} }
} }

View File

@@ -20,8 +20,8 @@ import { toast } from "sonner";
import type { AppRouter } from "../../server/src/routers"; import type { AppRouter } from "../../server/src/routers";
import { TRPCProvider } from "./utils/trpc"; import { TRPCProvider } from "./utils/trpc";
{{else if (eq api "orpc")}} {{else if (eq api "orpc")}}
import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import { QueryClientProvider } from "@tanstack/react-query";
import { orpc, ORPCContext, queryClient as orpcQueryClient } from "./utils/orpc"; import { orpc, queryClient } from "./utils/orpc";
{{/if}} {{/if}}
{{/if}} {{/if}}
@@ -99,7 +99,6 @@ const trpc = createTRPCOptionsProxy({
queryClient: queryClient, queryClient: queryClient,
}); });
{{else if (eq api "orpc")}} {{else if (eq api "orpc")}}
const queryClient = orpcQueryClient;
{{/if}} {{/if}}
export const createRouter = () => { export const createRouter = () => {
@@ -127,9 +126,7 @@ export const createRouter = () => {
{{else if (eq api "orpc")}} {{else if (eq api "orpc")}}
Wrap: ({ children }) => ( Wrap: ({ children }) => (
<QueryClientProvider client={queryClient}> <QueryClientProvider client={queryClient}>
<ORPCContext.Provider value={orpc}>
{children} {children}
</ORPCContext.Provider>
</QueryClientProvider> </QueryClientProvider>
), ),
{{else}} {{else}}

View File

@@ -9,7 +9,7 @@ import { useQuery } from "@tanstack/react-query";
import { useTRPC } from "@/utils/trpc"; import { useTRPC } from "@/utils/trpc";
{{/if}} {{/if}}
{{#if (eq api "orpc")}} {{#if (eq api "orpc")}}
import { useORPC } from "@/utils/orpc"; import { orpc } from "@/utils/orpc";
{{/if}} {{/if}}
{{/if}} {{/if}}
@@ -40,7 +40,6 @@ function HomeComponent() {
const trpc = useTRPC(); const trpc = useTRPC();
const healthCheck = useQuery(trpc.healthCheck.queryOptions()); const healthCheck = useQuery(trpc.healthCheck.queryOptions());
{{else if (eq api "orpc")}} {{else if (eq api "orpc")}}
const orpc = useORPC();
const healthCheck = useQuery(orpc.healthCheck.queryOptions()); const healthCheck = useQuery(orpc.healthCheck.queryOptions());
{{/if}} {{/if}}

View File

@@ -9,17 +9,11 @@
"test": "vitest run" "test": "vitest run"
}, },
"dependencies": { "dependencies": {
"@orpc/client": "^1.1.1",
"@orpc/server": "^1.1.1",
"@orpc/solid-query": "^1.1.1",
"@tailwindcss/vite": "^4.0.6", "@tailwindcss/vite": "^4.0.6",
"@tanstack/router-plugin": "^1.109.2", "@tanstack/router-plugin": "^1.109.2",
"@tanstack/solid-form": "^1.9.0", "@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": "^1.110.0",
"@tanstack/solid-router-devtools": "^1.109.2", "@tanstack/solid-router-devtools": "^1.109.2",
"better-auth": "^1.2.7",
"lucide-solid": "^0.507.0", "lucide-solid": "^0.507.0",
"solid-js": "^1.9.4", "solid-js": "^1.9.4",
"tailwindcss": "^4.0.6", "tailwindcss": "^4.0.6",

View File

@@ -14,7 +14,7 @@
}, },
"apps/cli": { "apps/cli": {
"name": "create-better-t-stack", "name": "create-better-t-stack",
"version": "2.14.4", "version": "2.16.0",
"bin": { "bin": {
"create-better-t-stack": "dist/index.js", "create-better-t-stack": "dist/index.js",
}, },