\section{Adatlekérés}

\begin{frame}{Hogyan kap adatot egy React alkalmazás?}
  \begin{block}{Az alaphelyzet}
    A React alkalmazás a böngészőben fut --- az adatok (felhasználók, termékek, stb.) általában egy \textbf{háttérszerveren} élnek. Az adatcserét HTTP kérésekkel végezzük: a frontend elküldi a kérést, a szerver JSON formátumban válaszol.
  \end{block}
  \vspace{0.5em}
  \begin{itemize}
    \item A böngésző beépített \texttt{fetch} API-ját vagy az \textbf{Axios} könyvtárat használhatjuk.
    \item Az adatlekérést általában egy \texttt{useEffect}-ben indítjuk el --- amikor a komponens megjelenik.
  \end{itemize}
\end{frame}

\begin{frame}{Fetch vs.\ Axios}
  \begin{itemize}
    \item \textbf{Fetch:} beépített, nem kell telepíteni. Hátránya: a hibás HTTP kódokat (pl. 404) \emph{nem} dobja el automatikusan, JSON-t kézzel kell kezelni.
    \item \textbf{Axios:} telepíthető könyvtár. Automatikusan kezeli a JSON-t, a HTTP hibákra kivételt dob, és \textbf{interceptorokkal} (pl. token hozzáadása minden kéréshez) könnyű kiegészíteni.
    \item Nagyobb projekteknél az Axios általában kényelmesebb és biztonságosabb.
  \end{itemize}
\end{frame}

\begin{frame}{Állapotok az adatlekérés során}
  \begin{itemize}
    \item \textbf{Betöltés (loading):} amíg a kérés folyamatban van, mutassunk spinner-t vagy skeleton-t --- ne maradjon üres az oldal.
    \item \textbf{Siker:} megérkeztek az adatok, megjelenítjük.
    \item \textbf{Hiba (error):} a hálózat megszakadt, a szerver hibát adott --- barátságos hibaüzenetet mutassunk, ne csak üres felületet.
    \item \textbf{Üres állapot (empty):} a válasz sikeres, de nincs adat --- pl. "Nincsenek még termékek".
  \end{itemize}
\end{frame}

\begin{frame}{Szerverállapot-kezelés: TanStack Query}
  \begin{itemize}
    \item Manuálisan kezelni a loading/error/data állapotokat minden komponensben ismétlődő és hibalehetőséges.
    \item A \textbf{TanStack Query} (korábbi nevén React Query) ezt automatizálja: cache-eli az adatokat, háttérben frissíti, kezeli az újrapróbálkozást.
    \item \textbf{Optimista frissítés:} azonnal frissítjük a UI-t a szerver válasza előtt --- ha a szerver hibát ad, visszaállítjuk. Így az alkalmazás gyorsabbnak tűnik.
  \end{itemize}
\end{frame}