Files
sase.tr/.agents/skills/tanstack-query/templates/provider-setup.tsx
Sase Dev 996d614d50 feat: admin user creation, Vite migration, dialog fix, pl24 integration
- Add POST /admin/users endpoint with password hashing and role support
- Add user creation dialog to admin users page
- Migrate web from Next.js to Vite + TanStack Router
- Fix Dialog component positioning for Tailwind CSS v4
- Add @source directive for @sase/ui package scanning
- Add pl24 integration parsers and vehicle decode flow
- Backup old Next.js app to apps/web-nj

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-12 14:24:58 +00:00

51 lines
1.5 KiB
TypeScript

// 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' }
* }}
* />
*/