Apollo Client z React.js: Czym jest Apollo?
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ść!
W tej lekcji chciałbym Ci opowiedzieć czym jest Apollo Apollo.
Jest to warstwa do pracy z grafiką Quark.
Jest to tak naprawdę połączenie kilku API baz danych i mikro serwisów w jeden gra.
Jeżeli chodzi o frontend, głównie skupimy
się na Apollo Client, czyli interfejsie do pracy z query po stronie frontendu.
Apollo to świetna biblioteka, przy czym biblioteka to mało powiedziane.
Jest to świetny ekosystem do wykonywania
query przy mutacji czy subskrypcji oraz integrowania aplikacji z serwerami query.
Możesz to również zauważyć na opisie na stronie głównej Apollo
i jeżeli zerkniemy tutaj niżej na tą stronę, mamy tutaj pewien graf.
Ten diagram przedstawia tą warstwę Apollo.
Ta warstwa Apollo dzieli się na dwie warstwy.
Jedna jest to strona klienta, a druga jest to strona serwera.
To o czym mówiłem, że jest to tak naprawdę
połączenie różnych Hibernate czy mikro serwisów czy baz danych.
To jest to strona serwera.
Możesz sobie wyobrazić, że to jest tak
naprawdę Apollo Server i ten serwer łączy się z różnymi źródłami danych.
Natomiast to są nasi klienci, którzy łączą się do tego serwera.
W ten sposób mamy jeden duży graf danych, który korzysta z różnych źródeł.
O ile jest to świetne.
Po stronie serwera również jest to bardzo dobre po stronie
aplikacji, czyli po stronie frontend, ponieważ możesz sobie wyobrazić, że mamy
tak naprawdę jeden interfejs do pracy z Apollo klientem.
Mamy jeden interfejs do pracy z pól.
Poza wieloma funkcjami do pracy z danymi,
również Apollo dostarcza nam wiele funkcjonalności związanym związanych z.
To oznacza, że jeżeli na przykład kłamiemy jakieś dane z Łeba czy czy z iOS a, nie ma
to większego znaczenia, to również tworzy nam się pewna warstwa.
Tutaj możesz sobie wyobrazić taką małą warstwę tzw.
server state.
Czyli chcesz, żeby Ci to troszeczkę zobrazować?
Może zerknijmy na to, co się tutaj wykonuje.
W Tworkach ćwiczymy stronę
i jest tutaj zapytanie do Raquel a jak sobie wyobrażasz?
Moglibyśmy to również zrobić za pomocą fetch.
A więc przejdźmy do konsoli
i gdybyśmy sobie wyobrażali naszą aplikację, moglibyśmy to zrobić również w
taki sposób powiedzieć w locie jakie dane byśmy
chcieli dostać, czyli tak naprawdę jakieś dane query wysłać i dostalibyśmy dane.
To prawda, możemy tak pracować serwerami
gra SQL, natomiast dlaczego Apollo jest fajniejszy?
Apollo udostępnia nam kilka ebooków oraz
serwisów do pracy właśnie z takimi metodami.
Jeżeli chodzi o jak to te techniki od razu działają z całym Lexicon wymiata.
Natomiast tak jak widzisz tutaj na tym diagramie to nie jest tylko projekt.
Również jest to iOS, również jest to Android.
Czy również jest to Angular Vue, czyli te najpopularniejsze frameworki?
Dobra, to oznacza, że bez potrzeby
tworzenia jakieś własnej warstwy możemy korzystać z danych z grawerem.
Wspomniałem również location.
Jest to bardzo ważny punkt, ponieważ
jeżeli popatrzymy na tego Frycza, to możesz sobie wyobrazić, że mamy jakiś
swój serwis w trakcie który takiego gracza implementujemy w
reakcje czy w innym frameworku nie ma to teraz większego znaczenia.
Natomiast prawda jest taka, że musisz stworzyć jakąś swoją warstwę, żeby te dane
albo obrobić, albo je gdzieś zapisać w jakimś lokalnym stage.
I to jest problematyczne do tej pory Redux jeżeli chodzi jak ten relaks był takim
głównym nośnikiem takich danych serwerowych.
Po każdym razie, kiedy wykonaliśmy sobie takiego fetch, te dane, które nam zwracał,
zapisywali się do redakcji i w ten sposób mogliśmy dzielić
te dane pomiędzy różnymi stronami, czy to stroną A, czy to stroną B.
Natomiast React i nie tylko React, raczej
Apollo i mechanizm kesza pozwala na to, żebyśmy nie musieli tego robić.
Apollo robi to za nas, Apollo tworzy swoją pewną warstwę kesza, tak jak powiedziałem
w tym malutkim miejscu i zamiast nadpisuje te dane, marnuje je.
UPDATE Czyli jeżeli ja wykonam jakąś mutację na stronie, a
powiedzmy sobie, że tutaj w tych malutkich dwóch miejscach
jedna strona A, druga strona B, jeżeli ja wykonam na stronie A jakąś mutację.
Zmieniając jakieś dane to nie muszę na stronie B robić
tych danych, czy nie muszę sam datować mojego XA, żeby strona B
dowiedziała się, że tam są już jakieś nowe dane, że ten aspekt się zmienił,
ponieważ Apollo zrobi to za mnie i to jest również świetne.
Kolejnym ostatnim punktem, na który
chciałbym zwrócić uwagę jest ten czwarty punkt.
Budujesz świetne doświadczenie developera i budujesz aplikacje znacznie szybciej.
Ponieważ tak jak wspomniałem, nie musisz
pisać tych kilku warstw do zarządzania stronami, ponieważ Apollo Ci się zwraca.
Masz już to gotowe oraz masz gotowe wiele
chórków czy funkcji powiązanych z lista i konkretnych frameworków.
Dlatego właśnie Apollo jest ekosystemem.
Jest bardzo popularny.
Zerknijmy sobie na repozytorium Apollo Crawl.
Tutaj mamy właśnie Apollo, klient Apollo.
Klient ma około 16 tysięcy gwiazdek i
możesz tutaj również zobaczyć te różne implementacje Apollo.
Jest również Apollo, serwer Apollo,
Android Apollo jest również jest Apollo, Angular, Apollo View.
Ale co jest ważne tutaj, to
ta popularność Apollo i porównaniu do repozytorium Graph Quelle, gdzie gra.
Możemy użyć grafu LG jako takiej
implementacji JavaScriptu po stronie frontendu
i tutaj to repozytorium ma zaledwie 1 tysiąc więcej gwiazdek.
Nie chodzi mi tutaj o porównywanie kto ma
więcej, natomiast o to, żebyś zobaczył jak duże Apollo jest w środowisku SQL.
Również jeżeli chodzi o konferencje Graph Query, to również tam twórcy Query mówili
wielokrotnie, że Apollo przystało jest troszeczkę nieodłączną częścią SQL.
I to pokrótce tyle, co chciałem Ci pokazać w tej krótkiej lekcji czym tak naprawdę
Apollo jest i dlaczego jest to takie ważne.
Myślę, że ten diagram jest chyba
najważniejszy, żebyś to zapamiętał, że to jest tak naprawdę ta warstwa.
Jeżeli chodzi o klienta, to jest to tutaj taka malutka warstwa, cecha, która stała
się w Apollo 3 nieodłączną warstwą i bardzo ważną.
To myślę, że to wszystko i możemy przejść do kolejnej lekcji,
gdzie pokażę Ci przykładowe API oraz myślę, że na przestrzeni tego kursu to co
Ci tutaj powiedziałem czym to Apollo jest zostanie Ci to wyjaśnione, ponieważ z
pewnością teraz dostajesz sporą dawkę wiedzy o różnych różnych tematach.
Natomiast na przestrzeni kursu zobaczysz
na wszystkich przykładach czy to query, czy to mutacji, czy to subskrypcji, jak to
Apollo działa i dlaczego jest takie fenomenalne.
W takim razie dziękuję Ci za uwagę i do usłyszenia w kolejnej lekcji.