Initial commit

templates/provider-setup.tsx

@@ -0,0 +1,50 @@
+// src/main.tsx
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { QueryClientProvider } from '@tanstack/react-query'
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
+import { queryClient } from './lib/query-client'
+import App from './App'
+import './index.css'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <QueryClientProvider client={queryClient}>
+      <App />
+      {/* DevTools are automatically removed in production builds */}
+      <ReactQueryDevtools
+        initialIsOpen={false}
+        buttonPosition="bottom-right"
+        position="bottom"
+      />
+    </QueryClientProvider>
+  </StrictMode>
+)
+
+/**
+ * Important notes:
+ *
+ * 1. QueryClientProvider must wrap all components that use TanStack Query hooks
+ * 2. DevTools must be inside the provider
+ * 3. DevTools are tree-shaken in production (safe to leave in code)
+ * 4. Only create ONE QueryClient instance for entire app (imported from query-client.ts)
+ *
+ * DevTools configuration options:
+ * - initialIsOpen: true/false - Start open or closed
+ * - buttonPosition: "top-left" | "top-right" | "bottom-left" | "bottom-right"
+ * - position: "top" | "bottom" | "left" | "right"
+ * - toggleButtonProps: Custom button styles
+ * - panelProps: Custom panel styles
+ *
+ * Example with custom styles:
+ * <ReactQueryDevtools
+ *   initialIsOpen={false}
+ *   buttonPosition="bottom-right"
+ *   toggleButtonProps={{
+ *     style: { marginBottom: '4rem' }
+ *   }}
+ *   panelProps={{
+ *     style: { height: '500px' }
+ *   }}
+ * />
+ */