From 6febe13b3f4ad4eff3f205ece445b3577255bf41 Mon Sep 17 00:00:00 2001
From: MohamedBassem <me@mbassem.com>
Date: Fri, 16 Feb 2024 20:33:00 +0000
Subject: Migrating to react query for client side queries

---
 packages/web/lib/providers.tsx | 33 +++++++++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)
 create mode 100644 packages/web/lib/providers.tsx

(limited to 'packages/web/lib/providers.tsx')

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>
+  );
+}
-- 
cgit v1.2.3-70-g09d2