feat(provider): add QueryProvider for managing React Query client and devtools

src/providers/QueryProvider.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+import React from 'react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+
+// Create a client with optimized settings for your app
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      // Stale time: how long data stays fresh (5 minutes)
+      staleTime: 5 * 60 * 1000,
+      // Cache time: how long data stays in cache when unused (10 minutes)  
+      gcTime: 10 * 60 * 1000,
+      // Retry failed requests 3 times
+      retry: 3,
+      // Retry delay increases exponentially
+      retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 30000),
+      // Refetch on window focus (useful for data consistency)
+      refetchOnWindowFocus: false,
+      // Refetch on reconnect
+      refetchOnReconnect: true,
+    },
+    mutations: {
+      // Retry failed mutations once
+      retry: 1,
+      // Retry delay for mutations
+      retryDelay: 1000,
+    },
+  },
+});
+
+interface QueryProviderProps {
+  children: React.ReactNode;
+}
+
+export function QueryProvider({ children }: QueryProviderProps) {
+  return (
+    <QueryClientProvider client={queryClient}>
+      {children}
+      {/* Only show devtools in development */}
+      {process.env.NODE_ENV === 'development' && (
+        <ReactQueryDevtools 
+          initialIsOpen={false}
+        />
+      )}
+    </QueryClientProvider>
+  );
+}