În orice aplicație cu date de la server există aceeași problemă: unde salvezi răspunsurile, când reîncarci, ce faci când rețeaua cade. Fiecare echipă își scrie propria soluție, adesea plină de bug-uri. TanStack Query (fostul React Query) rezolvă toate acestea printr-o singură idee: server state-ul nu e al tău, ci al serverului.
Ideea centrală: cache, nu state
În loc să copiezi răspunsul serverului într-un useState, îl „ceri” prin TanStack Query. El ține răspunsul în cache, îl afișează instant la vizite repetate, îl reîncarcă în fundal când e stale și îți dă stări clare: isLoading, isError, isSuccess. Dispariu useEffect-urile de fetching, dispare și duplicatul de logică între pagini.
Cum arată în practică
const { data, isLoading, error } = useQuery({
queryKey: ['projects'],
queryFn: fetchProjects,
})queryKey identifică datele. Același key folosit în două componente = același cache, fără să duplici fetching-ul. E simplu, declarativ și rezistent.
Mutații și invalidare: cum se actualizează datele
După o mutație (creezi un proiect, editezi un produs), invalidare invalidateQueries({ queryKey: ['projects'] }) reîncarcă datele afectate automat. Optimistic updates: afișezi rezultatul imediat, iar dacă serverul răspunde cu eroare, revii înapoi. Experiența utilizatorului trece de la „întrerupt de rețea” la instant.
Retry, refetch și staleTime
Configurezi cât de des se reîncarcă datele: staleTime (cât timp le consideri proaspete), refetchOnWindowFocus (da, implicit – și de asta se răzgândește setarea), retry automat la eșec. Pentru date care se schimbă des (stoc produse, notificări), folosești refetchInterval – polling fără să scrii tu cod.
Când nu e răspunsul
Pentru state local ușor (formular, sidebar deschis), TanStack Query e exagerat. Acolo rămâi la useState sau Zustand. Regula: server state către Query, client state către localStorage/useState.
Un sistem, nu un moft
Aplicațiile cu API-uri reale devin mai predictibile și mai rapide cu o singură bibliotecă de fetching. E parte din toolbox-ul standard al aplicațiilor web full-stack pe care le construiesc, împreună cu TypeScript, validare și un API curat.
Întrebări frecvente
Ce problemă rezolvă TanStack Query?
Gestionarea datelor de server în aplicații React: caching, re-fetch, retries, stări de loading/error și sincronizare. Fără el, scrii manual tot acest cod și ajungi la bug-uri subtile de stare.
Când am nevoie de TanStack Query?
Când aplicația ta citește date de la un API: liste, detalii, dashboard-uri. Pentru o pagină simplă fără date de server, e supra-dimensionat. Pentru aplicații cu multe date, economisește sute de linii de cod.
Funcționează cu server components?
Da, dar rolul lui se mută spre client: datele inițiale vin din server (prefetch), iar TanStack Query le menține fresh pe client. E o combinație excelentă cu Next.js App Router.