2 files changed, 53 insertions, 1 deletions
diff --git a/packages/shared-react/package.json b/packages/shared-react/package.json
index 46a2adb5..5e0a1d23 100644
--- a/packages/shared-react/package.json
+++ b/packages/shared-react/package.json
@@ -5,7 +5,9 @@
   "private": true,
   "dependencies": {
     "@hoarder/trpc": "workspace:^0.1.0",
-    "@tanstack/react-query": "^5.24.8"
+    "@tanstack/react-query": "^5.24.8",
+    "superjson": "^2.2.1",
+    "@trpc/client": "11.0.0-next-beta.308"
   },
   "devDependencies": {
     "@hoarder/eslint-config": "workspace:^0.2.0",
diff --git a/packages/shared-react/providers/trpc-provider.tsx b/packages/shared-react/providers/trpc-provider.tsx
new file mode 100644
index 00000000..2cd8661b
--- /dev/null
+++ b/packages/shared-react/providers/trpc-provider.tsx
@@ -0,0 +1,50 @@
+import { useMemo } from "react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { httpBatchLink } from "@trpc/client";
+import superjson from "superjson";
+
+import { api } from "../trpc";
+
+interface Settings {
+  apiKey?: string;
+  address: string;
+}
+
+function getTRPCClient(settings: Settings) {
+  return api.createClient({
+    links: [
+      httpBatchLink({
+        url: `${settings.address}/api/trpc`,
+        headers() {
+          return {
+            Authorization: settings.apiKey
+              ? `Bearer ${settings.apiKey}`
+              : undefined,
+          };
+        },
+        transformer: superjson,
+      }),
+    ],
+  });
+}
+
+export function TRPCProvider({
+  settings,
+  children,
+}: {
+  settings: Settings;
+  children: React.ReactNode;
+}) {
+  const queryClient = useMemo(() => new QueryClient(), [settings]);
+  const trpcClient = useMemo(() => getTRPCClient(settings), [settings]);
+
+  return (
+    <api.Provider
+      key={settings.address}
+      client={trpcClient}
+      queryClient={queryClient}
+    >
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    </api.Provider>
+  );
+}