Migrating to react query for client side queries

2 files changed, 35 insertions, 17 deletions

diff --git a/packages/web/lib/providers.tsx b/packages/web/lib/providers.tsx
new file mode 100644
index 00000000..e81645dd
--- /dev/null
+++ b/packages/web/lib/providers.tsx
@@ -0,0 +1,33 @@
+"use client";
+
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import React, { useState } from "react";
+import { api } from "./trpc";
+import { loggerLink } from "@trpc/client";
+import { httpBatchLink } from "@trpc/client";
+
+export default function Providers({ children }: { children: React.ReactNode }) {
+  const [queryClient] = React.useState(() => new QueryClient());
+
+  const [trpcClient] = useState(() =>
+    api.createClient({
+      links: [
+        loggerLink({
+          enabled: (op) =>
+            process.env.NODE_ENV === "development" ||
+            (op.direction === "down" && op.result instanceof Error),
+        }),
+        httpBatchLink({
+          // TODO: Change this to be a full URL exposed as a client side setting
+          url: `/api/trpc`,
+        }),
+      ],
+    }),
+  );
+
+  return (
+    <api.Provider client={trpcClient} queryClient={queryClient}>
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    </api.Provider>
+  );
+}
diff --git a/packages/web/lib/trpc.tsx b/packages/web/lib/trpc.tsx
index 540c6ab5..aa246047 100644
--- a/packages/web/lib/trpc.tsx
+++ b/packages/web/lib/trpc.tsx
@@ -1,20 +1,5 @@
 "use client";
-import { httpBatchLink } from "@trpc/client";
 import type { AppRouter } from "@/server/api/routers/_app";
+import { createTRPCReact } from "@trpc/react-query";
 
-import { loggerLink } from "@trpc/client";
-import { createTRPCClient } from "@trpc/client";
-
-export const api = createTRPCClient<AppRouter>({
-  links: [
-    loggerLink({
-      enabled: (op) =>
-        process.env.NODE_ENV === "development" ||
-        (op.direction === "down" && op.result instanceof Error),
-    }),
-    httpBatchLink({
-      // TODO: Change this to be a full URL exposed as a client side setting
-      url: `/api/trpc`,
-    }),
-  ],
-});
+export const api = createTRPCReact<AppRouter>();