Przejdź do treści głównej

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

Kamil Polok

Kamil Polok

09 cze 2021・6 min czytania

Next.jsReact

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

Opublikowany 09 czerwca 2021


Kamil PolokKamil PolokFront-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

Mateusz Wójcik

19 sty 2021・4 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

Eugene Zolotarenko

20 maj 2021・6 min czytania

An industrial technician reviewing predictive maintenance alerts with vibration and thermal sensor data on a plant floor
AI AgentsPredictive MaintenanceIndustry 4.0

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

Alexander Stasiak

29 sie 2026・9 min czytania

Bespoke software development services tailored to business needs
Custom software developmentEnterprise InnovationBespoke Software

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

Alexander Stasiak

30 sty 2026・11 min czytania

Software Solutions for Growth in the Climate Tech Sector
Software development

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

Marek Majdak

24 paź 2023・3 min czytania

An automated KYC verification flow showing identity documents, biometric matching and sanctions screening results
AI Agents ComplianceKYC

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

Marek Pałys

26 sie 2026・10 min czytania

Ostatnio dodane

Glass paper airplane flying through a chrome ring, symbolizing a fast, automated leasing application
FinTechAutomationCase Study

Jak Startup House skrócił czas składania wniosków leasingowych do 2 minut dla Siemens Financial Services

Kiedyś leasing oznaczał papierologię, ręczne sprawdzanie zdolności kredytowej i decyzje wydawane wyłącznie w godzinach pracy. Dla Siemens Financial Services Poland Startup House zastąpił to rozwiązaniem SimplyLease Online: aplikacją, w której klient wypełnia wniosek w ok. 2 minuty, a zautomatyzowana decyzja kredytowa pojawia się po ok. 7 minutach, o każdej porze. To case study pokazuje, jak platforma została zbudowana zgodnie ze standardami bezpieczeństwa Siemens Group, jak łączy się z systemami Siemens i zewnętrznymi dostawcami danych oraz co przyniosła współpraca trwająca od 2016 roku. Na koniec – trzy wnioski, które można odnieść do niemal każdego produktu finansowania lub kredytowego.

Alexander Stasiak

Alexander Stasiak

06 paź 2026・5 min czytania

Glass shield of four stacked layers with a glowing green core, symbolizing an AI agent embedded in a cybersecurity platform
AI AgentsCybersecurityCase Study

Jak platforma cyberbezpieczeństwa dla klientów Fortune 500 skróciła onboarding o 95% dzięki agentowi AI od Startup House

Platforma do oceny ryzyka cybernetycznego, której ufa wiele firm z listy Fortune 500, miała dobrze znany problem: klienci ją cenili, ale zaglądali do niej raz na kwartał, a onboarding wymagał 45 minut konfiguracji z przewodnikiem. Startup House stworzyło Aria, agenta AI osadzonego w produkcie, z czterowarstwowym interfejsem, który w jednym panelu obsługuje członków zarządu, CFO i CISO. Czas onboardingu skrócił się o 95% — do poniżej 2 minut, eksploracja danych stała się w pełni samoobsługowa, a platforma stała się codziennym narzędziem wspierającym decyzje. To case study wyjaśnia interfejs, architekturę izolacji tenantów oraz dlaczego nie wymagało to ingerencji w core codebase platformy.

Marek Pałys

Marek Pałys

05 paź 2026・5 min czytania

Five glass measuring cylinders filled with violet and green liquid to different levels, symbolizing measurable project outcomes
Business OutcomesCase StudyAI Projects

AI i projekty cyfrowe Startup House: 5 wymiernych wyników w liczbach

W tworzeniu oprogramowania łatwo o górnolotne deklaracje, dlatego ten artykuł opiera się na liczbach. Przechodzimy przez pięć efektów z projektów dla klientów Startup House — od 95-procentowego skrócenia czasu onboardingu dzięki wbudowanemu agentowi AI po 40-procentową redukcję kosztów developmentu dla Omnipack. Każda sekcja wyjaśnia, co konkretnie przełożyło się na ten wynik, i odsyła do publicznie dostępnego case study. Na koniec wskazujemy trzy wspólne wzorce tych projektów, warte wykorzystania niezależnie od tego, czy współpracujesz z nami, czy nie.

Alexander Stasiak

Alexander Stasiak

04 paź 2026・5 min czytania

Glass medical capsule inside a protective glass sphere with a chrome ring, symbolizing compliance-first healthcare software
HealthtechHIPAA ComplianceAI in healthcare

Tworzenie oprogramowania healthtech w Startup House: projekty i efekty z naciskiem na zgodność z regulacjami

W oprogramowaniu medycznym zgodność regulacyjna to albo decyzja architektoniczna, albo przeróbka po fakcie. Ten artykuł pokazuje, jak wygląda wbudowywanie jej od pierwszego dnia na przykładzie trzech projektów Startup House: platformy sprzedażowej dla Siemens Healthineers, działającej w ponad 60 krajach; MVP opieki nad osobami z demencją, ukształtowanego przez 7 sesji testów z udziałem pacjentów i opiekunów; oraz Doogie — pokazowego rozwiązania AI w standardzie HIPAA, zbudowanego w dwa miesiące. Wyjaśnia też, jak RAG zapewnia możliwość śledzenia odpowiedzi AI w zastosowaniach klinicznych do zweryfikowanych źródeł oraz dlaczego dane pacjentów nigdy nie są używane do trenowania modeli. Dla firm MedTech i platform SaaS dla ochrony zdrowia to praktyczne spojrzenie na to, co naprawdę oznacza podejście compliance-first w inżynierii — poza samą etykietą.

Marek Pałys

Marek Pałys

03 paź 2026・5 min czytania

Two projects, one method: how phased delivery and real user testing took Graspify to live corporate training and gave LITTLEWINE an investor-ready scope.
Edtech transformationProduct discoveryAI In Education

Rozwój EdTech w Startup House: co zbudowaliśmy i jaki to miało wpływ

Platformy EdTech częściej zawodzą z powodów UX niż technicznych: uczący się porzucają naukę, treści nie skalują się, a ROI trudno wykazać. Ten artykuł pokazuje, jak Startup House unika tych problemów dzięki dostarczaniu etapami i testom z prawdziwymi użytkownikami, na przykładzie dwóch projektów. Graspify przeszło od śmiałego pomysłu do platformy do microlearningu, która podczas wydarzenia firmowego przeszkoliła setki pracowników, a LITTLEWINE w 2 tygodnie — po 10 wywiadach z użytkownikami — otrzymało zakres gotowy dla inwestorów. Opisujemy też narzędzia AI do nauki, które odpowiadają wyłącznie na podstawie zatwierdzonych treści i mogą zostać uruchomione nawet w 2 tygodnie.

Alexander Stasiak

Alexander Stasiak

02 paź 2026・5 min czytania

Glass and chrome balance scale holding green glass coins and a chrome padlock, symbolizing speed and control in fintech AI
FinTechAI in FinanceRegulatory Compliance

AI w fintechu: projekty Startup House, wnioski i rezultaty

Klienci fintechów oczekują szybkości jak w aplikacjach konsumenckich, a regulatorzy — kontroli na poziomie bankowym. W tym artykule pokazujemy, jak Startup House poradził sobie z tym napięciem w trzech projektach: automatyczne decyzje kredytowe dostępne 24/7 dla Siemens Financial Services, platforma do zarządzania ryzykiem cybernetycznym, która zwiększyła przychody o 150% w rok, oraz zespół fintechu klimatycznego dla CHOOOSE skompletowany w 2 tygodnie. Przy każdym projekcie dzielimy się lekcją, jakiej nas nauczył. Na koniec przedstawiamy pięć zasad dla AI w finansach — od opierania każdej odpowiedzi na zweryfikowanych danych po projektowanie tenant isolation w architekturze.

Marek Pałys

Marek Pałys

01 paź 2026・5 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.

Siemens logo
PwC logo
Toyota logo