router-query-integration

Skill do integracji TanStack Router z TanStack Query dla aplikacji SPA. Umożliwia prefetchowanie danych w route loaderach przed renderowaniem, eliminując waterfall zapytań i zapewniając błyskawiczną nawigację. Obsługuje cache deduplication oraz DevTools do debugowania. Idealny dla frontendowców optymalizujących wydajność nawigacji i ładowania danych w aplikacjach React.

1. Zdefiniuj route loader w pliku trasy (np. src/routes/users/$id.tsx) używając createFileRoute z @tanstack/react-router. 2. W loadzie użyj queryClient.ensureQueryData() aby prefetchować dane przed nawigacją — przekaż queryKey, queryFn oraz staleTime. 3. W komponencie strony odwołaj się do tych samych danych za pomocą useQuery z identycznym queryKey — dane będą już załadowane z loadera i zwrócą się natychmiast. 4. Zdefiniuj query options w osobnym pliku (np. features/users/queries.ts) używając queryOptions z @tanstack/react-query dla maksymalnej type safety i uniknięcia duplikacji kodu. 5. Podczas developmentu dodaj Router i Query DevTools do aplikacji — będą się automatycznie ukrywać w produkcji. 6. Dostosuj staleTime w ensureQueryData() zależnie od częstości zmian danych — np. 30_000 ms dla danych które rzadko się zmieniają.