5 files changed, 57 insertions, 0 deletions
diff --git a/packages/web/app/api/trpc/[trpc]/route.ts b/packages/web/app/api/trpc/[trpc]/route.ts
new file mode 100644
index 00000000..872da79a
--- /dev/null
+++ b/packages/web/app/api/trpc/[trpc]/route.ts
@@ -0,0 +1,10 @@
+import { fetchRequestHandler } from '@trpc/server/adapters/fetch';
+import { appRouter } from '@/server/routers/_app';
+const handler = (req: Request) =>
+  fetchRequestHandler({
+    endpoint: '/api/trpc',
+    req,
+    router: appRouter,
+    createContext: () => ({})
+  });
+export { handler as GET, handler as POST };
diff --git a/packages/web/package.json b/packages/web/package.json
index 5762a476..a46e7344 100644
--- a/packages/web/package.json
+++ b/packages/web/package.json
@@ -18,6 +18,11 @@
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-toast": "^1.1.5",
+    "@tanstack/react-query": "^5.18.1",
+    "@trpc/client": "11.0.0-next-beta.274",
+    "@trpc/next": "11.0.0-next-beta.274",
+    "@trpc/react-query": "11.0.0-next-beta.274",
+    "@trpc/server": "11.0.0-next-beta.274",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "install": "^0.13.0",
diff --git a/packages/web/server/routers/_app.ts b/packages/web/server/routers/_app.ts
new file mode 100644
index 00000000..47c586b7
--- /dev/null
+++ b/packages/web/server/routers/_app.ts
@@ -0,0 +1,17 @@
+import { z } from "zod";
+import { procedure, router } from "../trpc";
+export const appRouter = router({
+    hello: procedure
+        .input(
+            z.object({
+                text: z.string(),
+            }),
+        )
+        .query((opts) => {
+            return {
+                greeting: `hello ${opts.input.text}`,
+            };
+        }),
+});
+// export type definition of API
+export type AppRouter = typeof appRouter;
diff --git a/packages/web/server/trpc.ts b/packages/web/server/trpc.ts
new file mode 100644
index 00000000..b34424ed
--- /dev/null
+++ b/packages/web/server/trpc.ts
@@ -0,0 +1,9 @@
+import { initTRPC } from '@trpc/server';
+// Avoid exporting the entire t-object
+// since it's not very descriptive.
+// For instance, the use of a t variable
+// is common in i18n libraries.
+const t = initTRPC.create();
+// Base router and procedure helpers
+export const router = t.router;
+export const procedure = t.procedure;
diff --git a/packages/web/server/utils.ts b/packages/web/server/utils.ts
new file mode 100644
index 00000000..70c06585
--- /dev/null
+++ b/packages/web/server/utils.ts
@@ -0,0 +1,16 @@
+import { httpBatchLink } from "@trpc/client";
+import { createTRPCNext } from "@trpc/next";
+import type { AppRouter } from "../server/routers/_app";
+import serverConfig from "@/lib/config";
+
+export const trpc = createTRPCNext<AppRouter>({
+  config(_opts) {
+    return {
+      links: [
+        httpBatchLink({
+          url: `${serverConfig.api_url}/api/trpc`,
+        }),
+      ],
+    };
+  },
+});