Apollo Client z React.js: Wprowadzenie
w Praktyce
3 godz. 17 min · ReactJS · Full-stack i Programowanie
Przemysław NowakSoftware EngineerCzego się nauczysz
- Wyjaśnienie czym jest Apollo
- Skonfigurowanie aplikacji React z Apollo Client
- Przedstawienie useQuery, useMutation oraz useSubscription
- Wyjaśnienie jak działa najważniejszy feature Apollo Client czyli Cache
- Stworzenie w pełni działającej aplikacji React z Apollo
- Praktyczne rozwiązanie dotyczące testowania
Jedna warstwa komunikacji
Jeżeli masz już doświadczenie w tworzeniu aplikacji komunikujących się z backendem to z pewnością wiesz czym jest ból niespójnego API oraz wielu sposobów wykonywania requestu po dane. Apollo rozwiązuje ten problem udostępniając jedno proste API do obsługi komunikacji z serwerem GraphQL. Nie musisz się martwić o to jak otworzyć kanał WebSocket dla subskrypcji czy o to jak napisać poprawny Query Document - to wszystko i jeszcze więcej dostarcza dla nas Apollo Client.
Server state + local state w jednym
Apollo 3 posiada niesamowity mechanizm cache, który pozwala zaoszczędzić czas na wykonywanie zapytań oraz setup bibliotek do przechowywania stanu serwera. Wszystkie request trafiają do warstwy pamięci podręcznej, którą zarządza dla nas Apollo - wybiera, dodaje oraz łączy odpowiednie podzbiory tak aby jak najmniej komunikować się z serwerem, a mimo to wiedzieć jaki jest jego stan. Dodatkową cechą mechanizmu Cache jest to, że może być łatwo użyty jako stan lokalny - bez potrzeby instalowania bibliotek takich jak Redux, jesteśmy w stanie stworzyć aplikację stateful w niesamowitym tempie!
Poprawne Unit Testy
Być może spotkałeś się już kiedyś z problemem Unit Testów, które działają - są na "zielono" ale mimo wszystko aplikacji jest zepsuta - to przykład źle napisanych jednostek. Komunikacja z serwerem i odbieranie danych to kluczowy element każdej aplikacji - dlatego ważne jest aby stworzyć poprawne unit testy, które będą nas chronić przed zepsutą aplikacją na produkcji. W kursie tym poznasz poprawny sposób na testowanie klienta Apollo, tak aby testy były stabilne i spełniały swoją rolę.
Błyskawiczne aplikacje
Z pewnością wyobrażasz sobie magiczne aplikację, które działają szybko bez potrzeby czekania na odpowiedzi z serwera oraz posiadające poprawne dane. Skoro tak, wiesz również, że stworzenie takich aplikacji wymaga wiele pracy, dodatkowych bibliotek oraz rozpisania każdego przypadku, tak aby wiedzieć kiedy dane są poprawne a kiedy trzeba zapytać serwer o nie jeszcze raz... A co jeżeli Ci powiem, że Apollo zrobi to za nas? Podejście Cache-First, o które oparta jest biblioteka klienta apollo dostarcza nam te wszystkie w/w cechy, a kurs ten pokaże Ci jak sprawnie posługiwać się tymi narzędziami.
Poważny Gracz w wielu stackach technologicznych
Apollo to poważny gracz w wielu stackach technologicznych. Jeżeli firma decyduje się używać GraphQL - który jest coraz bardziej popularny - to przeważnie w parze idzie Apollo. Dlatego w wielu ofertach pracy możesz spotkać tą technologię jako wymaganą. Zresztą, nie bez przyczyny, Apollo pozwala na sprawne, spójne oraz szybkie budowanie aplikacji czy to z Reactem, czy to z Angularem, Vue, Svelte oraz z Androidem czy iOS - mając jeden wspólny interfejs pracy, firmy są wstanie tworzyć aplikację w różnych technologiach komunikujących się z warstwą Apollo w jeden określony sposób.
Dla kogo jest ten kurs?
Kurs ten jest stworzony z myślą o FrontEnd developerach znających ReactJS oraz podstawy GraphQL, którzy chcą dodać do swojego arsenału technologicznego poważną broń jaką jest Apollo.
Cześć! Witam Cię w kursie spajającym wiedzę.
Gra wykłada na frontend.
Ja nazywam się Przemysław Nowak i na co dzień pracuję jako software inżynier
również z technologiami, których chciałem Cię nauczyć w tym materiale.
Na przestrzeni blisko trzech godzin.
Chciałbym Ci pokazać czym jest Apollo
Client oraz jak poprawnie używać tej biblioteki w połączeniu z Richardem.
Jak już wspomniałem, w codziennej pracy również używam tych technologii, więc
wiedza jaką Ci przekażę będzie jak najbardziej praktyczna.
Kurs zaczniemy od wprowadzenia do API, na
którym będziemy się opierać na przestrzeni całego materiału oraz do samego Apollo.
Pokażę Ci jak wygląda dokumentacja oraz jak z nią pracować.
Następnie skonfigurujemy Apollo w przygotowanej wcześniej aplikacji React, a
zaraz potem zobaczysz jak zainstalować wtyczkę twórców dla Chroma.
Również poświęcimy chwilę czasu tej wtyczce, ponieważ jest to oficjalny plugin
od twórców Apollo i dostarcza niesamowitą wartość w codziennej pracy.
Jeżeli nauczysz się poprawnie działać z
tymi twórcami, będziesz w stanie łatwo debugowania czy obserwować wykonywane
query i mutacje, a ponadto będziesz miał świetny obraz stworzony przez Apollo.
Zostając przy
temu zagadnieniu, również poświęcimy trochę czasu, ponieważ wydaje mi się, że
to największa zaleta biblioteki Apollo Client.
Opowiem Ci w jaki sposób tworzy się pamięć
podręczna, jak ją odczytywać czy jak dodać własne opcje konfiguracyjne.
Następnie przejdziemy do chórków.
Nauczysz się jak pobierać dane, jak efektywnie korzystać z query znając
najważniejsze i najczęściej wykorzystywane opcje.
Kolejno przejdziemy do mutacji, czyli jak się pewnie domyślasz przerobimy.
Wcześniej wspomniałem, że w Apollo
najważniejszy jest Kaszub, a co za tym idzie zobaczysz jak wykonywanie gwary czy
mutacji nadpisuje ten element oraz jak wydajna jest aplikacja, którą stworzymy.
Co więcej, nie będziemy potrzebowali
żadnego managera, ponieważ wykorzystamy do tego właśnie Apollo.
Na samym końcu skonfigurujemy subskrypcję i zajmiemy się hukiem miejsca w skrypcie.
Dowiesz się jak subskrybować je podane
oraz jak dodać odpowiednią konfigurację dla wersji beta.
To już teraz brzmi jak solidna dawka wiedzy.
Ale to nie koniec.
Jak już wspomniałem, chciałbym Ci
przekazać jak najwięcej praktycznej wiedzy, którą wykorzystuję na co dzień.
A jak wiemy każdy dobry kod posiada testy.
Dlatego pokażę Ci również jak napisać
dobre testy zgodnie z dobrymi praktykami oraz rekomendacjami Apollo Client.
Nauczysz się jak testować query czy
mutacje w sposób gwarantujący wyłapanie potencjalnych błędów.
Ja już teraz nie mogę się doczekać pierwszej lekcji.
Mam nadzieję, że masz jeszcze więcej energii ode mnie, a jeżeli tak, to nie
pozostaje mi nic innego jak powiedzieć Ci powodzenia i do usłyszenia.