profile header n shit

components/providers/ReactQueryProvider.tsx

@@ -1,19 +1,42 @@
 "use client";
 
+import { ReactNode, useEffect } from "react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { persistQueryClient } from "@tanstack/react-query-persist-client";
+import { createAsyncStoragePersister } from "@tanstack/query-async-storage-persister";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
-import { useState } from "react";
 
-export function ReactQueryProvider({
-	children
-}: {
-	children: React.ReactNode;
-}) {
-	const [queryClient] = useState(() => new QueryClient());
+interface Props {
+	children: ReactNode;
+}
+
+export function ReactQueryProvider({ children }: Props) {
+	const queryClient = new QueryClient({
+		defaultOptions: {
+			queries: {
+				staleTime: 1000 * 60 * 5, // 5 minutes
+				retry: 1
+			}
+		}
+	});
+
+	useEffect(() => {
+		// Persist to localStorage (safe, runs client-side)
+		const localStoragePersister = createAsyncStoragePersister({
+			storage: window.localStorage
+		});
+
+		persistQueryClient({
+			queryClient,
+			persister: localStoragePersister,
+			maxAge: 1000 * 60 * 60 // 1 hour max
+		});
+	}, [window || "wtf"]);
 
 	return (
 		<QueryClientProvider client={queryClient}>
 			{children}
+			<ReactQueryDevtools initialIsOpen={false} client={queryClient} />
 		</QueryClientProvider>
 	);
 }