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>
+  )
+}