Pamiętasz te czasy, gdy zarządzanie danymi z API w Reakcie sprowadzało się do `useEffect`, kilku `useState` i cichej modlitwy, żeby wszystko zadziałało? Ja pamiętam. Plątanina flag `isLoading`, `isError`, obsługa cache’u we własnym zakresie… To była droga przez mękę. Na szczęście na scenę wkroczył Tanner Linsley ze swoim dziełem – React Query (teraz TanStack Query), które odmieniło zasady gry. To nie jest kolejny globalny menedżer stanu. To Twój osobisty asystent do spraw komunikacji z serwerem.
W tym wpisie pokażę Ci, jak używać React Query, by Twoje aplikacje były szybsze, bardziej responsywne, a kod o wiele czystszy. Przejdziemy od podstaw fetchowania danych, przez magię cache’u i re-fetchingu, aż po zaawansowane wzorce takie jak paginacja, infinite scroll i optymistyczne aktualizacje. Zapnij pasy, bo wchodzimy na wyższy poziom zarządzania stanem serwera.
Spis treści
- Czym jest React Query i dlaczego to rewolucja?
- Podstawy w praktyce: hak `useQuery`
- Magia w tle: cache i strategie odświeżania danych
- Wzorce dla zaawansowanych: paginacja i infinite scroll
- Wisienka na torcie: optymistyczne aktualizacje (Optimistic Updates)
- Podsumowanie: czy React Query jest dla Ciebie?
React Query: Co to za zwierz i dlaczego warto się nim zainteresować?
Najprościej mówiąc, React Query to biblioteka do zarządzania stanem serwera. Co to oznacza? W przeciwieństwie do narzędzi jak Redux czy Zustand, które świetnie radzą sobie ze stanem po stronie klienta (np. stan formularza, otwarcie modala), React Query skupia się wyłącznie na danych, które pochodzą z zewnętrznego źródła – najczęściej z API.
Kluczowa zmiana myślenia polega na tym, że React Query traktuje dane z serwera jako zasób, którym zarządza w tle, a nie jako statyczny stan w Twojej aplikacji. To biblioteka zdejmuje z Twoich barków ciężar ręcznego zarządzania cyklem życia danych. Zamiast pisać logikę do:
- Fetchowania danych
- Przechowywania ich w stanie
- Obsługi stanu ładowania i błędów
- Aktualizowania danych w tle
- Cache’owania, by nie męczyć API
…dostajesz to wszystko w jednym, potężnym haku. To setki linijek kodu mniej i znacznie lepsze doświadczenie dla użytkownika końcowego.
Fundamenty: `useQuery` i jego supermoce
Sercem biblioteki jest hak `useQuery`. To on odpowiada za pobieranie, cache’owanie i aktualizowanie danych. Jego użycie jest banalnie proste. Wystarczy podać mu dwie rzeczy: unikalny klucz oraz funkcję, która te dane pobiera.
Klucz to podstawa: `queryKey`
Klucz zapytania (`queryKey`) to unikalny identyfikator, który React Query używa do zarządzania cachem. Może to być prosty string, ale najczęściej jest to tablica, która pozwala na bardziej granularne zarządzanie. Na przykład, klucz `[’todos’, 5]` może identyfikować konkretne zadanie o ID 5. Dzięki temu React Query wie dokładnie, które dane ma odświeżyć lub unieważnić.
Klucz (`queryKey`) to serce React Query. To dzięki niemu biblioteka wie, które dane ma w cache’u i kiedy je odświeżyć. Dbaj o jego unikalność i strukturę!
Funkcja pobierająca: `queryFn`
To po prostu asynchroniczna funkcja, która zwraca Promise z Twoimi danymi. Może to być `fetch`, `axios` czy cokolwiek innego, czego używasz do komunikacji z API. React Query zajmie się resztą – obsłuży stany ładowania, sukcesu i błędu, a wynik udostępni Ci w komponencie.
Magia cache’u i strategie re-fetchingu
React Query domyślnie traktuje dane jako „przestarzałe” (stale) natychmiast po pobraniu. Oznacza to, że przy następnym renderowaniu komponentu lub przełączeniu okna przeglądarki, biblioteka spróbuje odświeżyć je w tle. To gwarantuje, że użytkownik zawsze widzi aktualne dane, ale jednocześnie korzysta z cache’u, by uniknąć migotania interfejsu. Możemy kontrolować to zachowanie za pomocą opcji `staleTime` (jak długo dane są „świeże”) i `cacheTime` (jak długo nieaktywne dane trzymane są w pamięci).
Zaawansowane patterny: Paginacja i Infinite Scroll
Dwa popularne wzorce, które z React Query stają się przyjemnością. W przypadku paginacji, opcja `keepPreviousData` pozwala na płynne przejścia między stronami bez irytującego ekranu ładowania. Biblioteka w tle pobiera nowe dane, ale wciąż wyświetla stare, dopóki nowe nie będą gotowe.
Do implementacji nieskończonego przewijania (infinite scroll) służy dedykowany hak `useInfiniteQuery`. Pozwala on na łatwe zarządzanie kolejnymi „stronami” danych i ich płynne dołączanie do istniejącej listy. Koniec z ręcznym sklejaniem tablic i zarządzaniem stanem paginacji!
Wisienka na torcie: Optimistic Updates
To technika, która sprawia, że aplikacja wydaje się błyskawiczna. Polega na aktualizacji interfejsu użytkownika *zanim* serwer potwierdzi wykonanie operacji (np. dodanie komentarza). Użytkownik widzi zmianę natychmiast, a React Query w tle wysyła zapytanie. Jeśli operacja się nie powiedzie, biblioteka automatycznie przywraca poprzedni stan. To złoty standard nowoczesnego UX.
Do takich operacji służy hak `useMutation`. Dzięki niemu możemy zdefiniować, co ma się stać przed wysłaniem zapytania (`onMutate`), w przypadku błędu (`onError`) i po zakończeniu operacji, niezależnie od wyniku (`onSettled`).
React Query to bez wątpienia jedno z najważniejszych narzędzi w ekosystemie Reacta. Upraszcza kod, poprawia wydajność i znacząco podnosi jakość doświadczeń użytkownika. Jeśli jeszcze go nie używasz, gorąco polecam spróbować. Gwarantuję, że już nigdy nie spojrzysz na `useEffect` do fetchowania danych w ten sam sposób.
Jeśli szukasz developera, który potrafi poskromić asynchroniczne dane i dba o performance aplikacji, zapraszam do kontaktu na mojej stronie michalzareba.pl.
Dodaj komentarz