tanstack-devtools-patternslisted
Install: claude install-skill smicolon/ai-kit
# TanStack DevTools Patterns
This skill covers TanStack DevTools setup and usage for debugging React applications.
## React Query DevTools
### Installation
```bash
bun add -D @tanstack/react-query-devtools
```
### Basic Setup
```typescript
// main.tsx
import { QueryClientProvider } from '@tanstack/react-query'
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
import { createQueryClient } from '@/lib/query-client'
const queryClient = createQueryClient()
function App() {
return (
<QueryClientProvider client={queryClient}>
<RouterProvider router={router} />
<ReactQueryDevtools initialIsOpen={false} />
</QueryClientProvider>
)
}
```
### Production Lazy Loading
```typescript
// Only load devtools in development
import { lazy, Suspense } from 'react'
const ReactQueryDevtools = lazy(() =>
import('@tanstack/react-query-devtools').then((d) => ({
default: d.ReactQueryDevtools,
}))
)
function App() {
return (
<QueryClientProvider client={queryClient}>
<RouterProvider router={router} />
{import.meta.env.DEV && (
<Suspense fallback={null}>
<ReactQueryDevtools />
</Suspense>
)}
</QueryClientProvider>
)
}
```
### DevTools Configuration
```typescript
<ReactQueryDevtools
initialIsOpen={false}
position="bottom-right"
buttonPosition="bottom-right"
toggleButtonProps={{
style: {
marginBottom: '4rem', // Avoid overlapping with other UI
},
}}
/>
```
### Embedd