refactor(app): react-query for data fetching, fix infinite re-render

2026-07-11 22:37:11 +02:00
parent af328deac1
commit bb4d07055f
5 changed files with 98 additions and 88 deletions
--- a/app/app/root.tsx
+++ b/app/app/root.tsx
@@ -6,6 +6,7 @@ import {
  Scripts,
  ScrollRestoration,
 } from "react-router";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ThemeProvider } from "next-themes";

 import type { Route } from "./+types/root";
@@ -13,6 +14,10 @@ import "./app.css";
 import { AuthProvider } from "./lib/auth";
 import { TooltipProvider } from "./components/ui/tooltip";

+const queryClient = new QueryClient({
+  defaultOptions: { queries: { staleTime: 30_000, retry: 1 } },
+});
+
 export const links: Route.LinksFunction = () => [
  { rel: "preconnect", href: "https://fonts.googleapis.com" },
  {
@@ -43,15 +48,17 @@ export function Layout({ children }: { children: React.ReactNode }) {
        <Links />
      </head>
      <body>
-        <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
-          <AuthProvider>
-            <TooltipProvider>
-              {children}
-              <ScrollRestoration />
-              <Scripts />
-            </TooltipProvider>
-          </AuthProvider>
-        </ThemeProvider>
+        <QueryClientProvider client={queryClient}>
+          <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+            <AuthProvider>
+              <TooltipProvider>
+                {children}
+                <ScrollRestoration />
+                <Scripts />
+              </TooltipProvider>
+            </AuthProvider>
+          </ThemeProvider>
+        </QueryClientProvider>
      </body>
    </html>
  );