TanStack Query (React Query) – Teljes útmutató alapoktól haladó szintig

Verzió: TanStack Query v5 (React Query)
Nyelv: Magyar (technikai kifejezések angolul)
Célközönség: Kezdő és középhaladó React fejlesztők

Mi az a TanStack Query?

A probléma, amit megold

Képzeld el, hogy egy React alkalmazásban felhasználói adatokat kell betöltened egy API-ból. A „hagyományos" megközelítés valahogy így néz ki:

function UserProfile({ userId }) {
  const [user, setUser] = useState(null)
  const [isLoading, setIsLoading] = useState(true)
  const [error, setError] = useState(null)

  useEffect(() => {
    setIsLoading(true)
    fetch(`/api/users/${userId}`)
      .then(res => res.json())
      .then(data => {
        setUser(data)
        setIsLoading(false)
      })
      .catch(err => {
        setError(err)
        setIsLoading(false)
      })
  }, [userId])

  if (isLoading) return <div>Töltés...</div>
  if (error) return <div>Hiba történt!</div>
  return <div>{user.name}</div>
}

Ez az egyszerűbb esetben is sok boilerplate kódot igényel. De mi van, ha:

• Ugyanezt az adatot több komponens is igényli?
• Az oldal elhagyása után visszatérve friss adatot szeretnél?
• Automatikusan újra kellene próbálni egy sikertelen kérést?
• A háttérben frissülő adatot szeretnél mutatni a felhasználónak?

Ezeket mind magadnak kellene megvalósítani – és ez gyorsan kezelhetetlenné válik.

A TanStack Query pontosan ezeket a problémákat oldja meg.

Mi az a server state?

A React alkalmazásokban kétféle állapotot (state) kezelünk.

Client state – Az alkalmazás saját, lokális állapota (modal nyitott-e, tab, form értékek). Erre valók a useState, useReducer, Zustand, Redux.

Server state – Az adatok egy távoli szerveren élnek (profilok, terméklista, rendelések). Kihívások: aszinkron, elavulhat, megosztott, cache-elni kell.

A TanStack Query a server state kezelésére készült. Nem helyettesíti a Zustand/Redux-ot (client state), hanem kiegészíti őket.

Milyen problémákat old meg?

📝 Összefoglaló

• TanStack Query server state kezelésre való.
• A server state aszinkron, elavulhat, megosztott és cache-elni kell.
• A sima useEffect + fetch + useState pattern rosszul skálázódik.
• A library automatikusan kezeli a loading/error állapotokat, cache-t, refetch-et, retry-t.

Mit találsz a TanStack Query szekcióban?

1. Alap beállítás – Telepítés, QueryClient, QueryClientProvider
2. useQuery alapok – queryKey, queryFn, állapot flagek
3. Caching működése – staleTime, gcTime, automatikus refetch
4. Refetching és frissítés – manuális refetch, polling, invalidateQueries
5. useMutation – POST/PUT/DELETE, optimistic update
6. Query key gondolkodás – hierarchikus key-ek
7. Dependent és parallel query-k – enabled, useQueries
8. Pagination és infinite query – lapszám, useInfiniteQuery
9. Prefetching és hydration – prefetchQuery, SSR/Next.js
10. Devtools – React Query Devtools
11. Performance és optimalizálás – staleTime, select, retry
12. Tipikus hibák és best practice-ek – összefoglaló