Case StudiesBlogO nas
Napisz do nas

Jak wdrożyliśmy SWR w projekcie i dlaczego go pokochaliśmy

Kamil Polok

09 cze 20216 min czytania

Next.jsReact

Spis treści

  • Dlaczego SWR?

  • What is SWR?

  • Dlaczego pokochaliśmy SWR

  • Jak działa SWR

  • Mutacje danych

  • Integracje SWR

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:

Screenshot 2023-07-21 at 16.32.34.png

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:

Screenshot 2023-07-21 at 16.32.42.png

Dzięki temu cały hook może wyglądać tak prosto (w tym przykładzie pomińmy obsługę błędów):

Screenshot 2023-07-21 at 16.32.48.png

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:

Screenshot 2023-07-21 at 16.32.54.png

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:

Screenshot 2023-07-21 at 16.33.01.png

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!

Unicorn3.png

 

Opublikowany 09 czerwca 2021

Udostępnij


Kamil Polok

Front-end developer Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Digital Transformation Strategy for Siemens Finance

Cloud-based platform for Siemens Financial Services in Poland

See full Case Study
Ad image
Jak wdrożyliśmy SWR w projekcie i dlaczego go pokochaliśmy
Nie przegap żadnego artykułu - zapisz się do naszego newslettera
Zgadzam się na otrzymywanie komunikacji marketingowej od Startup House. Kliknij, aby zobaczyć szczegóły

Może Ci się również spodobać...

4 powody, aby użyć Chakra UI w swoim kolejnym projekcie
Chakra UIReact

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 20214 min czytania

Jak wygenerować PDF z HTML w aplikacji React/Node.js
ReactNode.js

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 20216 min czytania

Ostatnio dodane

Porównanie architektury pojedynczego agenta AI z systemem wielu współpracujących agentów
Multi-Agent SystemsProduct StrategyAI Architecture

Jeden Agent Czy System Multiagentowy

Wybór między jednym agentem a systemem multiagentowym zależy przede wszystkim od złożoności zadania: pojedynczy agent wygrywa przy prostych, liniowych procesach, a system multiagentowy sprawdza się tam, gdzie liczy się wieloetapowe wykonanie i wyższa precyzja. Artykuł porównuje obie architektury pod kątem kosztów tokenów, czasu wdrożenia, zarządzania błędami i skalowalności, pokazując konkretne zastosowania w finansach, e-commerce i software developmencie. Dodatkowo prezentujemy trzypytaniową ścieżkę decyzyjną dla founderów, którzy muszą wybrać architekturę AI dla swojego produktu. To praktyczny przewodnik decyzyjny, a nie tylko teoretyczne porównanie.

Alexander Stasiak

02 wrz 202611 min czytania

Skala pokazująca pięć poziomów autonomii agenta AI od wsparcia po pełną samodzielność
AI AutomationAI AgentsTechnical Strategy

Poziomy Autonomii Agentów AI

Poziomy autonomii agentów AI to ustandaryzowana skala określająca zakres swobody decyzyjnej systemu oraz stopień niezbędnego nadzoru ludzkiego — od poziomu 0 (brak autonomii) po poziom 5 (pełna autonomia, wciąż w sferze badań nad AGI). Artykuł szczegółowo omawia każdy z pięciu poziomów wraz z typowymi zastosowaniami biznesowymi, od inteligentnych makr RPA po autonomiczną obsługę klienta na poziomie 4. Pokazujemy też trzykrokową strategię bezpiecznego zwiększania autonomii — identyfikację wąskich gardeł, pętlę informacji zwrotnej i budowanie zaufania w trybie shadow mode. To materiał strategiczny dla CTO planujących, jak daleko posunąć autonomię swoich systemów AI.

Alexander Stasiak

02 wrz 202611 min czytania

Agent AI analizujący dane biznesowe firmy w czasie rzeczywistym na cyfrowym interfejsie
AI AgentsEnterprise AIBusiness Automation

Agenci AI Dla Firm 2026

Tradycyjna automatyzacja oparta na sztywnych regułach przestaje wystarczać w świecie, gdzie liczy się szybkość i skalowalność. Agenci AI dla firm to nowa kategoria autonomicznych systemów opartych na LLM, które samodzielnie planują, podejmują decyzje i optymalizują procesy w czasie rzeczywistym — bez konieczności mikrozarządzania. Ten przewodnik pokazuje, czym różnią się od klasycznego RPA, jak wygląda ich architektura, gdzie sprawdzają się najlepiej (finanse, e-commerce, obsługa klienta) oraz jak krok po kroku wdrożyć ich w organizacji. Dla decydentów technologicznych i menedżerów operacyjnych to praktyczna mapa drogowa — od identyfikacji wąskich gardeł po ROI i zgodność z RODO.

Alexander Stasiak

01 wrz 202611 min czytania

Wizualizacja cyklu myślenia i działania agentowej sztucznej inteligencji
Agentic AIAI ArchitectureAI Agents

Agentowa AI Co To 2026

Agentowa AI (Agentic AI) to systemy oparte na dużych modelach językowych, które samodzielnie planują, korzystają z narzędzi zewnętrznych i podejmują decyzje w celu osiągnięcia wyznaczonego celu — w przeciwieństwie do generatywnej AI, która głównie reaguje na polecenie. Artykuł wyjaśnia cykl Thought-Act-Observe, architekturę systemu agentowego (profilowanie, planowanie, pamięć, narzędzia) oraz konkretne różnice względem tradycyjnych chatbotów. Pokazujemy zastosowania w fintech, obsłudze klienta i DevOps, a także ryzyka takie jak pętle nieskończone i koszty operacyjne. To materiał wprowadzający dla każdego, kto chce zrozumieć fundamenty agentowej sztucznej inteligencji.

Alexander Stasiak

01 wrz 202611 min czytania

Schemat architektury agenta AI z modułami planowania, pamięci i narzędzi
AI AgentsAI AutomationAgentic AI

Agent AI w 2026 Co To

Agent AI to inteligentny system komputerowy, który postrzega środowisko, podejmuje decyzje i wykonuje działania w celu osiągnięcia złożonych celów bez ciągłego nadzoru człowieka — w odróżnieniu od standardowych modeli LLM, które wymagają promptu dla każdego kroku. Artykuł wyjaśnia cztery filary architektury agenta (profilowanie, planowanie, pamięć, użycie narzędzi), przedstawia rodzaje agentów — od task-oriented po systemy Multi-Agent — oraz pokazuje strategię wdrożenia krok po kroku. Omawiamy też realne ryzyka: pętle nieskończone, prompt injection i halucynacje w działaniu. To fundamentalny materiał dla każdego, kto zaczyna przygodę z agentami AI.

Alexander Stasiak

31 sie 202611 min czytania

Agent AI zintegrowany z systemami CRM i ERP przedsiębiorstwa
AI AgentsEnterprise AIBusiness Automation

Agenci AI Dla Przedsiębiorstw

Agenci AI dla przedsiębiorstw to autonomiczne systemy, które nie tylko generują treści, ale samodzielnie planują, podejmują decyzje i wykonują złożone sekwencje zadań end-to-end. W przeciwieństwie do chatbotów integrują się z CRM, ERP i wewnętrznymi bazami danych, automatyzując całe procesy bez ciągłego nadzoru człowieka. Ten przewodnik pokazuje architekturę agenta, kluczowe wertykale zastosowań (finanse, obsługa klienta, logistyka) oraz proces budowy od discovery po pełną skalowalność. Dla decydentów biznesowych to praktyczna mapa przejścia od prostej asysty cyfrowej do pełnej autonomii operacyjnej.

Alexander Stasiak

31 sie 202610 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.

Umów bezpłatną konsultację

Pracuj z zespołem, któremu ufają firmy z czołówki rynku.

Siemens logo
PwC logo
Toyota logo

Twój partner w cyfrowej transformacji.

Firma

Startup Development House sp. z o.o.

Aleje Jerozolimskie 81

Warszawa, 02-001

VAT-ID: PL5213739631

KRS: 0000624654

REGON: 364787848

Kontakt

hello@startup-house.com

Nasze biuro: +48 789 011 336

Nowy biznes: +48 798 874 852

Obserwuj nas

Award
logologologologo

Copyright © 2026 Startup Development House sp. z o.o.

UE ProjektyPolityka prywatnościPolityka treści AI