From b14db95cfb3822edba83d144a47898bec05a306f Mon Sep 17 00:00:00 2001
From: Danijel Martinek <danijel@fraqtal.xyz>
Date: Tue, 5 May 2026 08:47:07 +0200
Subject: [PATCH] feat(core-trpc): add Next.js + TanStack provider components

---
 packages/core-trpc/package.json               |  4 ++-
 .../core-trpc/src/providers/next-provider.tsx | 32 +++++++++++++++++++
 .../src/providers/tanstack-provider.tsx       | 32 +++++++++++++++++++
 3 files changed, 67 insertions(+), 1 deletion(-)
 create mode 100644 packages/core-trpc/src/providers/next-provider.tsx
 create mode 100644 packages/core-trpc/src/providers/tanstack-provider.tsx

diff --git a/packages/core-trpc/package.json b/packages/core-trpc/package.json
index 8a91cc9..2f22bf3 100644
--- a/packages/core-trpc/package.json
+++ b/packages/core-trpc/package.json
@@ -4,7 +4,9 @@
   "version": "0.0.0",
   "type": "module",
   "exports": {
-    ".": "./src/index.ts"
+    ".": "./src/index.ts",
+    "./next": "./src/providers/next-provider.tsx",
+    "./tanstack": "./src/providers/tanstack-provider.tsx"
   },
   "scripts": {
     "build": "tsc --noEmit",
diff --git a/packages/core-trpc/src/providers/next-provider.tsx b/packages/core-trpc/src/providers/next-provider.tsx
new file mode 100644
index 0000000..22ae0b3
--- /dev/null
+++ b/packages/core-trpc/src/providers/next-provider.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import { useState } from "react";
+import { QueryClientProvider } from "@tanstack/react-query";
+import { createTRPCClient, httpBatchLink } from "@trpc/client";
+import superjson from "superjson";
+import type { AppRouter } from "@repo/core-api";
+import { TRPCProvider } from "../client";
+import { getQueryClient } from "../query-client";
+
+export function NextTrpcProvider({
+  children,
+  trpcUrl = "/api/trpc",
+}: {
+  children: React.ReactNode;
+  trpcUrl?: string;
+}) {
+  const [queryClient] = useState(() => getQueryClient());
+  const [trpcClient] = useState(() =>
+    createTRPCClient<AppRouter>({
+      links: [httpBatchLink({ url: trpcUrl, transformer: superjson })],
+    }),
+  );
+
+  return (
+    <TRPCProvider trpcClient={trpcClient} queryClient={queryClient}>
+      <QueryClientProvider client={queryClient}>
+        {children}
+      </QueryClientProvider>
+    </TRPCProvider>
+  );
+}
diff --git a/packages/core-trpc/src/providers/tanstack-provider.tsx b/packages/core-trpc/src/providers/tanstack-provider.tsx
new file mode 100644
index 0000000..e950e87
--- /dev/null
+++ b/packages/core-trpc/src/providers/tanstack-provider.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import { useState } from "react";
+import { QueryClientProvider } from "@tanstack/react-query";
+import { createTRPCClient, httpBatchLink } from "@trpc/client";
+import superjson from "superjson";
+import type { AppRouter } from "@repo/core-api";
+import { TRPCProvider } from "../client";
+import { getQueryClient } from "../query-client";
+
+export function TanstackTrpcProvider({
+  children,
+  trpcUrl,
+}: {
+  children: React.ReactNode;
+  trpcUrl: string;
+}) {
+  const [queryClient] = useState(() => getQueryClient());
+  const [trpcClient] = useState(() =>
+    createTRPCClient<AppRouter>({
+      links: [httpBatchLink({ url: trpcUrl, transformer: superjson })],
+    }),
+  );
+
+  return (
+    <TRPCProvider trpcClient={trpcClient} queryClient={queryClient}>
+      <QueryClientProvider client={queryClient}>
+        {children}
+      </QueryClientProvider>
+    </TRPCProvider>
+  );
+}