22. DevTools

Зачем нужны DevTools?

DevTools — незаменимый инструмент для отладки TanStack приложений. Они позволяют:

• Видеть состояние всего кэша в реальном времени
• Инспектировать каждый запрос: данные, статус, конфигурацию
• Вручную инвалидировать, сбрасывать или перезагружать запросы
• Отслеживать навигацию и состояние роутера
• Профилировать производительность

TanStack Query DevTools

Установка

npm install @tanstack/react-query-devtools

Подключение

import { ReactQueryDevtools } from '@tanstack/react-query-devtools'

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <MyApp />
      {/* Только в development! */}
      <ReactQueryDevtools
        initialIsOpen={false}    // Свёрнуты по умолчанию
        buttonPosition="bottom-right"  // Позиция кнопки
      />
    </QueryClientProvider>
  )
}

Что показывают Query DevTools

Панель запросов:

• Список всех запросов в кэше
• Статус каждого: 🟢 fresh, 🟡 stale, ⚫ inactive, ❌ error
• Количество наблюдателей (observers)
• Время последнего обновления

Детальный просмотр запроса:

• Полные данные в кэше (JSON-дерево)
• queryKey и все параметры
• staleTime, gcTime, refetchInterval
• Кнопки: Refetch, Invalidate, Reset, Remove

TanStack Router DevTools

Установка

npm install @tanstack/router-devtools

Подключение

import { TanStackRouterDevtools } from '@tanstack/router-devtools'

function App() {
  return (
    <>
      <RouterProvider router={router} />
      <TanStackRouterDevtools router={router} initialIsOpen={false} />
    </>
  )
}

Что показывают Router DevTools

• Текущий активный маршрут и его параметры
• Дерево всех маршрутов
• Search params текущего маршрута
• Данные лоадеров
• История навигации

Только в разработке

DevTools автоматически исключаются из production-сборки:

// Вариант 1: process.env
{process.env.NODE_ENV === 'development' && <ReactQueryDevtools />}

// Вариант 2: Lazy import
const ReactQueryDevtools = React.lazy(() =>
  import('@tanstack/react-query-devtools').then(d => ({
    default: d.ReactQueryDevtools,
  }))
)

Кастомная позиция панели

<ReactQueryDevtools
  buttonPosition="bottom-left"   // bottom-left | bottom-right | top-left | top-right
  position="left"                 // Позиция панели: left | right | top | bottom
  initialIsOpen={true}            // Открыты при загрузке
/>