Apollo Client z React.js: Wstęp do Apollo Hooks
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ę wprowadzić do chórków jakie oferuje Apollo.
Znajdujemy się aktualnie w dokumentacji kupców na stronie Apollo SQL
i chciałbym Ci tutaj przedstawić jak mniej więcej to wygląda i z czym to się je.
Żebyś zrozumiał od podstaw jako pole.
No działa.
Generalnie skonfiguruj.
Daliśmy już Apollo Probe, jak pamiętasz, więc tutaj mamy Apollo Provider, podaliśmy
swojego klienta i ten provider to nie jest nic innego jak context react context.
I tutaj mamy również ten sam przykład, że najpierw musimy ten provider dostarczyć,
aby huki działały, ponieważ póki konsumują ten kontekst odesłany właśnie w tym
miejscu, czyli do klienta bez tego klienta, póki nie są w stanie działać.
Tutaj jest taki przykład, że również Apollo udostępnia Apollo Consumer
i ten consumer możemy użyć właśnie w taki sposób.
Jest to zapewne znajomy.
Jeżeli jesteś zaznajomiony zaznajomiony z
kontekstem w trakcie, że to jest tak naprawdę nakładka na ten
kontekst Consumer oraz Context provider i wtedy dostajemy tutaj to tą
wartość, którą mieliśmy w naszym provider, czyli tutaj klienta.
Jeżeli teraz przejdziemy do chórków i pierwszym takim kółkiem chyba
najważniejszym jest jest query, no to właśnie use query pod spodem będzie
używało tego consumer i będzie chciało wziąć sobie klienta i za pomocą klienta
będzie wiedziało do jakiego API, do jakiego serwera SQL chcemy się odwołać.
Więc jeżeli tutaj w tym miejscu dostarczyliśmy usera i naszego
pokładowego serwera, to wtedy ten Chuck, którego będziemy używać
będzie właśnie tutaj się odwołał do tego serwera oraz będzie korzystał z wszystkich
opcji, które przekażemy właśnie w tym kliencie.
Jeszcze chciałbym Ci tutaj przedstawić ten kontekst w dokumentacji jak ta.
Jeżeli nie jesteś z tym konceptem
zaznajomiony to oczywiście odwołuję Cię tutaj do do dokumentacji abyś doczytał.
Natomiast to jest dokładnie to co tutaj widzimy, że tworząc kontekst
tutaj w taki sposób tworzymy kontekst za pomocą API jak.
A więc tworzymy sobie kontekst create context i jakąś domyślną wartość.
Tutaj jako argument przekazujemy i wtedy ten kontekst staje się pewnego
rodzaju komponentem i on ma dwa komponenty.
Jest to provider,
w którym jeżeli go generujemy w drzewie dostarczamy wartość
i później jest to consumer, którego możemy używać gdzieś w niższym,
niżej w hierarchii, aby tą wartość mieć i wtedy możemy ominąć to dryfowanie w dół.
Więc możemy za pomocą kontekstu mieć taki stan serwowany.
A więc tak to wygląda jak się odwołuje do
tej dokumentacji, jeżeli nie jesteś zaznajomiony z kontekstem.
Natomiast cały Apollo Client właśnie
działa w kontekście, więc jest to bardzo ważny patent.
Mamy Apollo Provider, dostarczamy klienta
i później jest Apollo Consumer, który tak naprawdę jest ukryty przez Kuki, więc my
tego Apollo Consumer nie musimy implementować, jeżeli używamy chórków.
Jeżeli nie używasz łuków, a chciałbyś się
odwołać do klienta, to wtedy możesz użyć Apollo Consumer
i wtedy możesz skonsumować sobie ten kontekst Apollo.
Natomiast wracając do chórków mamy tutaj czy dostępnych
w zasadzie jest ich troszeczkę więcej, natomiast czy są najważniejsze?
Jest use query, jest lazy query, jest
motion, jest subskrypcją, również jest tutaj juz Apollo Client i ten
Zeus Apollo Client to jest właśnie ten hook do używania kontekstu.
Gdybyśmy chcieli dostać tego klienta
nie poprzez Apollo Consumer to również możemy użyć Apollo Clay.
Natomiast zobaczmy czym te huki są. Just Query.
Tutaj jest przykład to jest to po prostu hook do wywołania query.
Query definiujemy sobie w kroku tak
aby otrzymać dokument i ta funkcja tak, która również pochodzi z biblioteki
Apollo Client nam w tym pomaga, więc tutaj przekazujemy
nasze query, czyli to jest dokładnie to query, które piszemy w programie i wtedy
te query jest takim pierwszym argumentem dla query.
Dlatego hooka i jako drugi argument przekazujemy jakieś
opcje i jedną z tych opcji mogą być zmienne używane w tym naszym query.
Więc tutaj jest taki przykład gdzie używamy języka.
Język przekazujemy do query.
Wtedy byśmy chcieli w tych zmiennych
przekazać ten język gdzieś tutaj z tego komponentu, więc możemy to zrobić.
I dokładnie tak to działa.
API jakie zwraca tutaj to jest query, to te rzeczy więcej, natomiast głównie tych,
których się używa jest to loading error oraz data loading.
Jest to flaga czy w danym momencie
to query jest wykonywane, czyli czy to się ten request?
Ładuje czy nie.
Error mówi czy mamy tam jakiś error czy nie i data to po prostu mamy dane.
I tutaj jest taki przykład typowy jeżeli ładujemy to zwracamy, że hej, ładujemy,
możemy to ładnie dodać, a jeżeli wszystko jest ok to zwracamy po prostu dane.
I tutaj mamy również tę opcję.
Nie chciałbym tutaj przez wszystkie te opcje przechodzić.
Jest tutaj kilka.
Możemy skopiować query, możemy tworzyć jakieś interwały i tak dalej, i tak dalej.
My na razie przez to nie będziemy przechodzić.
Przejdziemy do kolejnego hooka, czyli do bazy I Query i Query.
Działa bardzo podobnie jak query, z tą
różnicą, że możemy sobie załadować dane na jakieś akcje.
Czyli jeżeli wykonamy je z query
to to query nam się nie wykona od razu, jeżeli wykonujemy już query.
Wróćmy jeszcze tutaj.
Było to w momencie kiedy wykonamy tego
hooka to odrazu kiedy ten komponent nam się załaduje to od razu również
wyślemy request o dane do naszego serwera SQL owego.
Jeżeli popatrzymy na Useless Query
to tutaj dostajemy jako pierwszy argument tak naprawdę funkcję.
Czyli tutaj będziemy musieli dostać
tablicę i jako pierwszy argument jest to funkcja.
Drugim argumentem
jest już ten obiekt, czyli czy zostało wywołane, czy się ładuje i czy są dane.
Również tutaj opcjami,
czyli argumentami dla Useless i Query mamy query oraz mamy opcje, czyli tutaj np.
variable i te opcje są dokładnie takie same jak tutaj.
W parametrach mamy tutaj wypisane.
To jest wszystko to samo, więc to się w większości powtarza.
Nie musisz tego studiować dwa razy.
Jedyna różnica jest taka, że teraz
nasze query się nie wykonało, a dostaliśmy funkcję i tą funkcję możemy wykonać.
W tym przykładzie mamy, że wykonujemy ją na onclick w tym miejscu.
Więc jeżeli byśmy mieli taki przykład, że chcemy wykonać to query na kliknięciu na
jakiś element, no to moglibyśmy użyć Useless Query naszej aplikacji.
Nie będziemy tego robić dlatego, że teoretycznie moglibyśmy to zrobić klikając
na wchodzenie w szczegóły danego danego produktu.
Natomiast.
To jest złe rozwiązanie z tego względu, że my chcemy zrobić z query na stronie
produktu, ponieważ kiedy ktoś wejdzie z linka, my zawsze chcemy tej skóry wykonać.
Więc są kasy na tej ulicy, natomiast przykład naszej aplikacji nie będzie.
Ważne jest to, abyś wiedział, że coś takiego istnieje.
Kolejnym krokiem jest Time, którego również będziemy używać.
Przedstawię Ci tutaj to
też troszeczkę szybciej, a później się nad tym bardziej troszeczkę skupimy.
Jest podobnie jak tutaj z Query.
Tutaj dostajemy również mutację jako
pierwszy argument, w drugim argumencie również opcję.
Opcję możemy przekazać w tym miejscu lub w tym.
Tutaj jakby się skupimy troszeczkę później na tym.
Natomiast pierwszy argument to jest funkcja, a więc ta funkcja jest wykonywana
i dostaniemy też jakieś dane i również stany czy się ładuje czy się nie ładuje.
Więc tutaj API jest bardzo podobne
i tym naszym ostatnim najważniejszym krokiem jest najważniejsze w tym sensie,
że który daje najwięcej fanu jest jest sam skrypt.
Ponieważ tutaj się wypina to wszystko do subskrypcji.
To jest świetne,
więc możemy w bardzo łatwy sposób podpiąć się pod jakąś subskrypcję i tutaj
dostajemy właśnie te dane z tej subskrypcji.
Czyli tutaj jest taki przykład czy komentarz został dodany
i jeżeli został dodany to te dane tutaj zostaną wyświetlone.
Więc to pokrótce tyle jeżeli chodzi o takie wprowadzenie do subskrypcji.
Ja już teraz zapraszam Cię do kolejnej lekcji, gdzie zajmiemy się hukiem z Query.