Use tRPC and react-hook-form

app/[lang]/providers/TrpcProvider.tsx

@@ -0,0 +1,45 @@
+import { useState } from "react";
+
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { getFetch, httpBatchLink, loggerLink } from "@trpc/client";
+import superjson from "superjson";
+
+import { trpc } from "@/utils/trpc";
+
+export const TrpcProvider = ({ children }: { children: React.ReactNode }) => {
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: { queries: { staleTime: 5000 } },
+      }),
+  );
+
+  const url = "/api/trpc";
+
+  const [trpcClient] = useState(() =>
+    trpc.createClient({
+      links: [
+        loggerLink({
+          enabled: () => true,
+        }),
+        httpBatchLink({
+          url,
+          fetch: async (input, init?) => {
+            const fetch = getFetch();
+            return fetch(input, {
+              ...init,
+              credentials: "include",
+            });
+          },
+        }),
+      ],
+      transformer: superjson,
+    }),
+  );
+
+  return (
+    <trpc.Provider client={trpcClient} queryClient={queryClient}>
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    </trpc.Provider>
+  );
+};