51 lines
1.5 KiB
TypeScript
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' }
|
|
* }}
|
|
* />
|
|
*/
|