router-query-integration

Use when setting up route loaders or optimizing navigation performance. Integrates TanStack Router with TanStack Query for optimal data fetching. Covers route loaders with query prefetching, ensuring instant navigation, and eliminating request waterfalls.

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ą.