feat(WEB-127): add trpc to handle requests both serverside and clientside

lib/trpc/Provider.tsx

@@ -0,0 +1,29 @@
+"use client"
+
+import { useState } from "react"
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
+import { httpBatchLink } from "@trpc/client"
+
+import { api } from "./client"
+import { transformer } from "@/server/transformer"
+
+function initializeTrpcClient() {
+  return api.createClient({
+    links: [
+      httpBatchLink({
+        transformer,
+        url: "http://localhost:3000/api/trpc",
+      }),
+    ],
+  })
+}
+
+export default function TrpcProvider({ children }: React.PropsWithChildren) {
+  const [queryClient] = useState(() => new QueryClient({}))
+  const [trpcClient] = useState(() => initializeTrpcClient())
+  return (
+    <api.Provider client={trpcClient} queryClient={queryClient}>
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    </api.Provider>
+  )
+}

lib/trpc/client.ts

@@ -0,0 +1,5 @@
+import { createTRPCReact } from "@trpc/react-query"
+
+import type { AppRouter } from "@/server"
+
+export const api = createTRPCReact<AppRouter>({})

lib/trpc/server.ts

@@ -0,0 +1,9 @@
+import { appRouter } from "@/server"
+import { createContext } from "@/server/context"
+import { createCallerFactory } from "@/server/trpc"
+
+const createCaller = createCallerFactory(appRouter)
+
+export function serverClient() {
+  return createCaller(createContext())
+}