Jak wdrożyliśmy SWR w projekcie i dlaczego go pokochaliśmy
Kamil Polok
09 cze 2021・6 min czytania
Dlaczego SWR?
Ostatnio w SDH mieliśmy okazję rozwijać projekt w React z użyciem Redux/Toolkit. Tyle że, choć dane trzymaliśmy i pobieraliśmy ze store'a, w aplikacji nie było zaimplementowanego mechanizmu cache. A trzymanie dziesiątek odpowiedzi w stanie to, delikatnie mówiąc, średni pomysł. Szybko też zrobiło się zbyt łatwo, by pogubić się we wszystkich slice'ach stanu, mimo użycia Toolkit.
Co więcej, na backend nie miało to wtedy żadnego pozytywnego wpływu. Przy tych ogromnych porcjach danych niektóre requesty trwały wieczność. A że UI aplikacji opierało się na długich listach elementów i niewielu operacjach CRUD, szybko stało się jasne, że przyda się jakiś cache. Wybór padł więc na SWR — bibliotekę stworzoną przez zespół Vercel (znany także z Next.js).
What is SWR?
Ok, lubisz czytać definicje? Mam nadzieję, że nie, bo ta będzie jedną z najkrótszych: ‘SWR to biblioteka React Hooks do zdalnego pobierania danych’. Tyle. Proste? Tak, ale zaraz pokażę, że SWR jest też bardzo potężny. A tak przy okazji: SWR to skrót od stale-while-revalidate. To już sporo mówi o działaniu. SWR najpierw zwraca dane z cache (stale), wysyła żądanie po aktualizację (revalidate), a następnie zwraca nowe dane. Jak mówiłem — proste.
Dlaczego pokochaliśmy SWR
Łatwo zauważyć, jak użycie SWR eliminuje problemy opisane na początku artykułu. Dzięki SWR:
- UI działał płynnie (po początkowych requestach) dzięki cache'owi danych
- Usunęliśmy niemal wszystkie slice'y przechowujące dane z API i towarzyszącą im logikę
- Uprościliśmy proces rewalidacji danych po operacjach CRUD na kolekcjach
- Przyspieszyliśmy rozwój nowych funkcji zależnych od API
Jak więc wdrożyliśmy tę bibliotekę, żeby osiągnąć taki efekt?
Jak działa SWR
Po krótkim czasie pracy z SWR okazało się, że jest naprawdę prosty i przyjazny. Chcesz wykonać request do API za pomocą SWR? Proszę bardzo:
Jest tu tylko jeden haczyk: fetcher. To po prostu Twoja własna funkcja do pobierania danych. Aplikacja, nad którą pracowaliśmy, miała już skonfigurowany axios z pełnym configiem (interceptors, headers, base URL itd.), więc po prostu opakowaliśmy naszą instancję axios w taki sposób, by dostać własny fetcher:
Dzięki temu cały hook może wyglądać tak prosto (w tym przykładzie pomińmy obsługę błędów):
I... to wszystko! Stworzyliśmy hook do pobierania danych z API korzystając ze wszystkich dobrodziejstw SWR. Za każdym razem, gdy wywołasz ten hook, najpierw zwróci wcześniej pobrane dane (jeśli są), a dopiero potem zrevaliduje i zwróci nową kolekcję.
SWR out of the box ma garść prekonfigurowanych opcji (wszystkie są wymienione tutaj), dzięki którym praca z nim to bułka z masłem. Warto wspomnieć o ulubionej opcji: dedupingInterval.
Typowy scenariusz: pobierasz dane w jednym komponencie, rozwijasz go dalej, komponenty potomne zaczynają się rozrastać, aż w końcu dziecko 4. poziomu potrzebuje tych danych. Jak je tam dostarczyć bez większego wysiłku i bez powielania requestów? Spokojnie: po prostu ponownie użyj hooka SWR... Deduping interval nie pozwoli wykonać tego samego requestu ponownie przez określony czas (domyślnie 2 sekundy). W sam raz.
„Ale jeśli wywołam endpoint i zwróci te same dane co wcześniej, mój komponent i tak się przerysuje”. Nie — SWR stosuje głębokie porównanie, więc przerysowanie (rerender) nastąpi tylko wtedy, gdy dane faktycznie się zmienią. Funkcję porównującą możesz oczywiście dostosować.
Mutacje danych
Możesz powiedzieć, że pobierać (GET) dane jest zawsze łatwo — a co z mutacjami? To na pewno bardziej skomplikowane. Niekoniecznie: mutacje nie muszą być koszmarem, a mnie zaskoczyło, jak prosto mutuje się dane w SWR (po wcześniejszych przygodach z Apollo). Oto przykład z życia:
W tym przykładzie mutate to funkcja importowana z SWR, a /users to klucz, który nadaliśmy w hooku useUsers (nie musi to być URL endpointu — klucz i URL możesz przekazać osobno).
Jeśli chcesz trzymać w cache i aktualizować pojedynczą encję (obiekt) pobraną z większej kolekcji, po prostu zmutuj ją po jej kluczu, na przykład tak:
Brzmi zbyt prosto? To jest proste. Spróbuj sam, a być może zaoszczędzisz sporo czasu na pisaniu rozbudowanej logiki w Reduxie i debugowaniu wywołań API.
Integracje SWR
Jak widać, wdrożenie SWR jest proste; dodając kilka smaczków, łatwo wynieść powyższe przykłady na wyższy, bardziej abstrakcyjny poziom. Oczywiście, SWR na tym się nie kończy — dostępnych jest mnóstwo opcji i integracji:
integracja z GraphQL
obsługa błędów z mechanizmem ponowień (retry)
automatyczna rewalidacja
obsługa paginacji (także dla infinite loading)
prefetching danych
i wiele innych (dokumentacja)
Praca z SWR była dla nas naprawdę świetna i na pewno rozważymy jego użycie w kolejnych projektach. Jeśli chcesz dowiedzieć się więcej o tej bibliotece, odwiedź ich oficjalną stronę z dokumentacją, konfiguracjami i przykładami tutaj.
Miłego kodowania!
Digital Transformation Strategy for Siemens Finance
Cloud-based platform for Siemens Financial Services in Poland
Może Ci się również spodobać...
4 powody, aby użyć Chakra UI w swoim kolejnym projekcie
Chakra UI to prosta, modułowa i dostępna biblioteka komponentów do szybkiego tworzenia aplikacji React. Dzięki łatwemu dostosowaniu, obsłudze trybu ciemnego, responsywnemu designowi i naciskowi na dostępność Chakra UI wyróżnia się na tle innych bibliotek UI, co czyni ją świetnym wyborem dla deweloperów React.
Mateusz Wójcik
19 sty 2021・4 min czytania
Jak wygenerować PDF z HTML w aplikacji React/Node.js
Generowanie PDF-ów z HTML może być wyzwaniem, ale przy odpowiednim podejściu można osiągnąć oczekiwane rezultaty. Poznaj różne rozwiązania — od stylów wydruku w CSS po biblioteki takie jak html2canvas, jsPDF i Puppeteer. Zrozum zalety i wady każdego podejścia, aby wybrać najlepsze rozwiązanie dla swojego projektu. Skontaktuj się z nami pod adresem hello@start-up.house, aby uzyskać więcej informacji i pomoc. Powodzenia w generowaniu PDF-ów!
Eugene Zolotarenko
20 maj 2021・6 min czytania
Agenty AI dla predykcyjnego utrzymania ruchu i niezawodności urządzeń
Jak agenci autonomiczni analizują dane wibracyjne, termiczne i akustyczne, by z kilkutygodniowym wyprzedzeniem przewidywać awarie — i podejmować działania bez udziału człowieka.
Alexander Stasiak
29 sie 2026・9 min czytania
Agenci AI do zapewnienia zgodności z przepisami i automatyzacji KYC
Jak autonomiczne agenty przeprowadzają KYC, screening AML i raportowanie regulacyjne end‑to‑end — skracając onboarding z dni do sekund i zapewniając możliwą do obrony ścieżkę audytową.
Marek Pałys
26 sie 2026・10 min czytania
Alternatywy dla Alpine.js
Szukasz alternatyw dla Alpine.js? Sprawdź Vue.js, React, Angular i Ember.js do tworzenia interaktywnych, dynamicznych aplikacji webowych.
Marek Majdak
24 paź 2023・3 min czytania
Usługi tworzenia oprogramowania na zamówienie
Gotowe, pudełkowe oprogramowanie prędzej czy później przestaje odpowiadać potrzebom rozwijających się firm. Tworzenie oprogramowania na zamówienie dostarcza dedykowane systemy skrojone na miarę Twoich procesów, integracji i długoterminowych celów.
Alexander Stasiak
30 sty 2026・11 min czytania
Ostatnio dodane
Wdrożenie PLLuM-a w firmie: jak wybrać firmę wdrożeniową i od czego zacząć
PLLuM, polski otwarty model językowy, można pobrać bezpłatnie, ale sam model to dopiero początek. Pokazujemy, jak wygląda wdrożenie PLLuM-a od pomysłu do działającego systemu, ile kosztuje infrastruktura i jakie pytania zadać firmie wdrożeniowej.
Alexander Stasiak
06 lis 2026・10 min czytania
Dotacje i pożyczki na AI i cyfryzację 2026 – jak wybrać dostawcę technologii
Od listopada 2026 r. firmy mogą sięgnąć po pożyczki PARP do 15 mln zł z umorzeniem do 15%, Ścieżkę SMART B+R i granty Dig.IT. Pokazujemy, które programy finansują wdrożenia AI i cyfryzację oraz jakie wymagania musi spełnić dostawca technologii, żeby projekt przeszedł ocenę, realizację i rozliczenie.
Alexander Stasiak
05 lis 2026・10 min czytania
Najlepsze firmy AI w Europie Środkowo-Wschodniej dla enterprise
Wybór partnera technologicznego do wdrożenia sztucznej inteligencji w segmencie enterprise wymaga wyjścia poza standardowe kryteria software house’u. W regionie CEE (Europa Środkowo-Wschodnia) operują podmioty, które łączą globalną skalę z głęboką ekspertyzą inżynierską, oferując systemy agentowe i bazy wiedzy RAG w standardach zgodnych z AI Act oraz DORA. Ten artykuł prezentuje zestawienie zweryfikowanych firm posiadających udokumentowane wdrożenia AI dla sektora korporacyjnego.
Alexander Stasiak
04 lis 2026・10 min czytania
Najlepsze firmy AI dla fintechu i ubezpieczeń (2027)
Wybór partnera technologicznego w sektorach regulowanych to decyzja o wysokiej stawce. Jeśli szukasz odpowiedzi, które najlepsze firmy AI dla fintechu i ubezpieczeń działają w Polsce, ten tekst zestawia software house’y, integratorów i producentów oprogramowania, którzy wdrażają agentów AI, bazy wiedzy RAG i analitykę danych w bankach, fintechach i u ubezpieczycieli. Znajdziesz tu tabelę porównawczą, profile firm, wymagania DORA, RODO i AI Act, proces wdrożenia oraz case study Startup House z liczbami.
Alexander Stasiak
03 lis 2026・12 min czytania
AI w produkcji żywności: przykłady wdrożeń i partnerzy wdrożeniowi (2027)
Producenci żywności mierzą się z krótkimi terminami przydatności, wahaniami cen surowców i rosnącymi wymaganiami sieci handlowych, dlatego prognozowanie popytu i planowanie produkcji coraz częściej wspiera sztuczna inteligencja. W tym przeglądzie pokazujemy, jak w 2026 i 2027 roku wygląda AI w produkcji żywności: przykłady wdrożeń i partnerzy wdrożeniowi w Polsce. Znajdziesz tu porównanie firm wdrożeniowych (Startup House, Comarch, Sii Polska, TTMS) i narzędzi (RELEX, o9 Solutions, Kinaxis), proces wdrożenia, ryzyka i odpowiedzi na najczęstsze pytania.
Alexander Stasiak
02 lis 2026・11 min czytania
Integracja AI z ERP i CRM (SAP, Comarch, Dynamics): jak to wygląda w praktyce (2027)
Integracja AI z ERP i CRM (SAP, Comarch, Dynamics) w praktyce oznacza wybór jednego z trzech modeli: asystenta wbudowanego przez producenta systemu, własnej warstwy AI podłączonej przez API albo agentów AI działających na systemach przez MCP. Tekst jest dla średnich i dużych firm w Polsce, które chcą połączyć modele językowe z istniejącym ERP lub CRM, także legacy. Znajdziesz tu porównanie narzędzi producentów (SAP Joule, Microsoft Dynamics 365, Comarch ERP, Salesforce Agentforce, Oracle NetSuite), firm wdrożeniowych, proces wdrożenia, ryzyka i case study z liczbami.
Alexander Stasiak
01 lis 2026・13 min czytania
Gotowy, aby scentralizować swoje know-how z pomocą AI?
Rozpocznij nowy rozdział w zarządzaniu wiedzą — gdzie Asystent AI staje się centralnym filarem Twojego cyfrowego wsparcia.
Pracuj z zespołem, któremu ufają firmy z czołówki rynku.
