Apollo Client z React.js: Instalacja Frontendu
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 pokażę Ci jak zainstalować frontend.
W zasadzie to co zrobimy to zainstalujemy sobie kreator jak mapa.
Myślę, że robiłeś to wielokrotnie, natomiast również przez to przejdziemy.
Później zainstalujemy sobie Apollo
klienta, a na końcu pokażę Ci jak zainstalować, a w
zasadzie nie jak zainstalować, tylko jak wyglądają.
Apollo Client Pulse jako dodatek do Chrome.
Również podeślę Ci link jak
do tych kursów z Home Store, więc myślę, że możemy przejść do działania.
Jesteśmy w Create jak app.
Na stronie skupimy tą komendę npm Mpx creator jaka ja już jestem w
drugiej lekcji, więc również możesz się przyłączyć.
Jeżeli nie to możesz również stworzyć kolejny katalog.
Tutaj od zera sobie stworzymy tą aplikację frontend ową.
Tutaj mamy już serwer i ten serwer.
Na razie w tej lekcji nie będziemy go dotykać.
Natomiast to jest ten serwer, który zostawiliśmy sobie w poprzedniej lekcji i
będziemy go używać na przestrzeni całego kursu.
A więc tutaj wklejamy sobie tą komendę RB
z create i wykonajmy tutaj, a w zasadzie nazwijmy tutaj tą aplikację
po prostu front i poczekajmy aż cała aplikacja.
OK nasz create aplikację.
Mamy tutaj oczywiście standardowe komendy.
Jak wystartować, zbudować czy testować tą aplikację?
Możemy teraz przejść do
Discorda i zobaczyć czy tą aplikację tutaj rzeczywiście mamy.
Jesteśmy w katalogu Front, a więc obok serwera mamy również aplikację Frontend.
I tutaj tak jak mówiłem mamy te komendy start build test eject.
Nas będzie interesowała ta komenda start.
Przy czym będę chciał tutaj zrobić jedną
małą zmianę, ponieważ nie wiem czy pamiętasz.
Nasz serwer działa na porcie 3000, więc ja bym chciał tutaj ustawić inny port.
Niech to będzie 3600 jako zmienną środowiskową.
A więc najpierw ustawimy ten port
dla tej naszej aplikacji, a później po prostu sobie odpalimy R jak script start.
Teraz możemy to zapisać i wrócić do
terminala, przejść do katalogu front i zobaczyć czy wszystko działa.
Więc wykonajmy Yarn start lub npm start.
Nie ma to znaczenia.
W zależności od tego czego używasz może być również npm start.
OK, nasza aplikacja wystartowała, nie
widzimy tylko tutaj, więc skopiuję to sobie tutaj.
No i dobra, mamy tutaj naszą aplikację na
porcie 3600, a więc wszystko jest w porządku.
Aplikacja działa.
Kolejnym krokiem jaki wykonamy to będzie instalacja Apollo.
Jesteśmy tutaj na stronie Apollo.
Również link znajdziesz w źródłach
i chciałbym, żebyśmy przeszli przez ten podstawowy Getting Started
Guide, żebym Ci wytłumaczył mniej więcej na czym Apollo polega i ta konfiguracja.
Natomiast później już będziemy oczywiście
tworzyć tą aplikację z tym naszym serwerem, o której mówiliśmy wcześniej.
Na razie chciałbym byśmy przez to przeszli.
Też widział jak sobie tak na surowo Apollo skonfigurować.
Skupimy sobie tę komendę npm.
Przejdźmy tutaj do terminala.
Może tutaj otworzę sobie nowe okno do tej aplikacji.
Musimy wejść,
a więc tutaj mam odpalona aplikację, tutaj będziemy sobie instalować kolejne rzeczy.
A więc wykonajmy sobie tutaj to npm install apollo client growl.
OK, Apollo się zainstalował,
więc przejdźmy teraz do dokumentacji i mamy tutaj ten Getting Started Guide
i mamy tutaj ten przykład, więc skupimy może ten kawałek kodu o schowku.
Klient tutaj Ten URL czyli URL
jest to URL do przykładowego sandboxa, który stworzyli twórcy Apollo.
My tutaj zmienimy ten URL na nasz serwer.
Czy w naszym przypadku będzie localhost
3000 lub ten link do not point, który jest na I roku jak będziesz uważał.
Natomiast na razie chciałbym, żebyśmy
tutaj wykonali sobie takie testowe query na tym przykładzie.
A więc przejdźmy do naszej aplikacji
i chciałbym abyśmy w katalogu sources stworzyli nowy katalog.
Będzie to katalog Apollo i chciałbym żebyśmy tutaj stworzyli plik klient.
Czy jest w tym pliku będę chciał stworzyć taki
Apollo client, gdyż nie jestem pewien zdefiniowany, a
więc będę chciał sobie go zaimportować z biblioteki Apollo.
Oraz również chciałbym zaimportować In memory też i in memory.
Cóż, to jest dokładnie ten kesz, o którym Ci mówiłem.
Tutaj tworzy się jakby instancja tego
obiektu, takiego można powiedzieć serwerowego redaktora.
Nie chciałbym Ci tutaj mieszać tego z redakcją, bo jest to zupełnie coś innego.
Natomiast możesz sobie to wyobrazić, że to jest taki obiekt,
który ma tam pewne metody na tej instancji i można tym Łukaszem manipulować.
Natomiast domyślnie on też działa w domyślny sposób kiedy przychodzą np.
dwa obiekty rysuje albo nadpisuje itd.
Jeżeli nie dodajesz tutaj żadnych opcji, to on będzie działał w domyśle.
My oczywiście później będziemy tutaj również troszeczkę eksperymentować i tę
opcję dodawać tak abyś widział jak to działa.
Możemy to zapisać.
Ja bym chciał również jeszcze tutaj wyeksportować tego klienta.
A więc zróbmy export const client
tak abyśmy mogli go sobie zaimportować z naszej aplikacji.
I teraz przejdźmy z powrotem do dokumentacji.
Kolejnym krokiem jaki musimy zrobić to
podpiąć sobie ten Apollo Client do naszej aplikacji.
Możemy to zrobić za pomocą Apollo providera, a więc to zrobimy tutaj.
Jeszcze krok wcześniejszy to wykonanie tego klienta.
Gdybyśmy mieli taki indeks jest.
Możemy sobie wyobrazić, że w zasadzie mamy.
Tak jest.
Nawet nie musimy sobie tego wyobrażać.
To możemy również za pomocą klienta
wykonać na tej instancji, którą stworzyliśmy metodę query i wtedy
przekazać tutaj z tagiem to query, który chcemy wykonać.
Tutaj są jakieś rejestry, więc możemy sobie w zasadzie takie query wykonać.
To będzie oczywiście zwracało nam Promise, a więc za pomocą dema możemy sobie jako
Promise obsłużyć lub za pomocą async kolejka.
Więc kopiemy na razie ten kod.
Przejdźmy do kodu.
I w zasadzie do tego naszego index jest i tutaj.
Importujemy sobie tego klienta, więc zróbmy sobie import klient.
I tutaj jesteśmy w Apollo i mamy klienta.
I nie mamy jeszcze tutaj tego importowanego.
Więc zróbmy to może tutaj troszeczkę wyżej.
Import tak from Apollo client.
I teraz nasza aplikacja już cały czas działa, więc możemy przejść do tej
aplikacji, ponieważ nasza aplikacja serwuje właśnie ten plik index,
który renderuje nam akta w naszym drzewku dokładnie w elemencie dwie id root.
To również ten kod, który tutaj się znajduje się wykona,
a więc ten nasz klient wykona query dokładnie z tym.
Z tą definicją, którą tutaj mamy, a pytamy
o racje dla waluty USD i zobaczymy jak to będzie wyglądało.
Więc przejdźmy do przeglądarki.
OK, gra Alice from Apollo Clement.
OK, więc spróbujmy może odświeżyć stronę, aby zaczęła działać.
Tam chyba nie zapisanego.
Zobaczmy.
I tutaj tak, dostaliśmy w konsoli obiekt i dostajemy.
Dostaliśmy tutaj.
Te waluty.
No i oczywiście
to jest dokładnie to, co nam zwrócił ten konsul log, który wykonaliśmy tutaj,
ale również jeżeli nie my worki, to w workach
powinniśmy po odświeżeniu zauważyć, że tutaj się takie query wykonało
i wykonało się to query właśnie do tego gra SQL, a
tutaj w Falloucie właśnie dostaliśmy Operation Name, Query oraz Variable
i dokładnie to co widzieliśmy w konsoli się tutaj zwróciła, więc wszystko działa.
Tak działa.
Klient gra w Quelle, natomiast my jeszcze
chcielibyśmy dodać tą jedną opcję, czyli chcielibyśmy sobie tego klienta
skonfigurować aby działał z naszym serwerem tak naprawdę.
Więc my będziemy chcieli dodać Apollo providera Apollo.
Providera również możemy zaimportować z Apollo Client i to dokładnie zrobimy.
Przejdźmy do Scout.
Tutaj tego brakuje.
Tak, a tak naprawdę nie będziemy potrzebować.
Możemy tutaj zrobić sobie Apollo Client i może również nie będziemy potrzebować
jak strict mode, więc możemy go sobie nadpisać i użyjemy tutaj po prostu Apollo
Client i naszym klientem będzie ten nasz klient, który zaimportowany sobie
z naszego katalogu Apollo to możemy usunąć to.
To teraz możemy to zapisać.
Jedyna różnica jeszcze jaką Tutaj nawet nie różnica.
Jedyna rzecz jaką chciałbym zrobić to zmienić ten URL i
chciałbym żeby ten URL był do naszego serwera czyli localhost 4000.
I w tym momencie ten serwer jest
nieosiągalny, a więc chciałbym żebyśmy również ten serwer sobie odpalili.
W zasadzie to nie jest localhost 3000 localhost 3000 slash.
OK, i teraz przejdźmy jeszcze sobie do terminalu.
Tutaj możemy sobie przejść z katalogu
front do katalogu serwer i możemy tutaj wykonać sobie npm start.
OK.
To nie była ta komenda.
Za chwilkę to sprawdzę i do Ciebie wrócę.
OK.
Natomiast najpierw czekaj głupi błąd.
Teraz wystartujemy nasz serwer.
OK, fajnie. A więc serwer mamy, wystartowały, mamy,
wystartowały również naszą aplikację i w zasadzie coś jest jeszcze nie tak.
Okej, zobaczmy na nasz kod co tam jest nie tak.
Apollo Client tu jest w porządku.
Aha, oczywiście tutaj ma być Apollo providera.
Jak najbardziej.
My działamy w oparciu o Kontekst API, a
więc tutaj musi być dodany Apollo Provider.
Teraz spróbujmy to zapisać i zobaczymy czy będzie ok jeszcze tutaj Apollo.
Idea musi domykać ten tag.
Zapiszmy i przejdźmy do przeglądarki.
OK, teraz wygląda, że jest ok, więc w porządku.
I to ostatnia rzecz, którą chciałem z Tobą zrobić.
Jest to Apollo Client Tools.
Tutaj mamy kursy.
Ja już mam je zainstalowane.
Jest tutaj również link do tych kursów w źródłach i polecam Ci zainstalować te
kursy, ponieważ jest to naprawdę świetne narzędzie.
Przejdźmy do tej zakładki Apollo.
Jest tutaj również grafika.
Troszeczkę to rozszerzymy.
Jest tutaj również zakładka DX.
Jak zauważyłeś podpiąłem się już pod ten
nasz serwer i my tutaj dostaliśmy dokładnie tą samą dokumentacje, która
została odczytana z tego serwera, którą mieliśmy w tym programie.
A więc nie musimy tak naprawdę zaglądać do
programu, żeby spróbować sobie coś tutaj wykonać.
Co ciekawe.
Są również tutaj mutacje Sima, a więc cała
ta dokumentacja możemy również przeszukiwać.
Dodatkowo możemy przeglądać jakie query
zostały wykonane, jakie mutacje zostały wykonane i jeszcze raz je wykonywać, czyli
robić taki replay i również możemy przeglądać coś, co jest bardzo przydatne.
Generalnie cały pakiet Apollo jest bardzo duży.
Opiera się również na ideach, więc przeglądanie kesza
to jest chyba najpopularniejsza rzecz, jeżeli chodzi o te narzędzie od Apollo.
Natomiast co jest jeszcze tutaj fajne, to
tak naprawdę ten program tutaj mamy, więc my możemy sobie coś już tutaj wykonać.
Wykonajmy query i w tym query ok.
I w tym query chciałbym zapytać o URL i może o jakieś.
Product list.
Na przykład najpierw spróbujmy to wykonać. OK.
Jak widzisz, możemy sobie w ten sposób również testować Query.
Tutaj dostaliśmy listę produktów.
To jest lista produktów z.
Tego naszego API, które właśnie
zastosowaliśmy, więc mamy już coś przykładowego w tej
bazie danych, więc nie musimy się martwić o dane.
Możemy na nich działać i operować.
No więc jak widzisz jest to świetne narzędzie.
Oczywiście Ci polecam.
Jeżeli po instalacji byś nie zauważył tego narzędzia u siebie w zakładce, to po
prostu musisz jeszcze raz uruchomić Chrome.
Jeżeli nie będziesz go tutaj widział to musisz rozszerzyć sobie tymi woreczkami
te opcje i wybrać opcję Apollo i wtedy powinieneś już mieć dostęp.
I to jest dokładnie to co wykonaliśmy, czyli to query wykonaliśmy.
Możemy tutaj również zrobić Ripley tak jak
mówiłem branding profil i również będzie właśnie replay wykonany.
Tutaj już mamy np. informację, że wykonaliśmy dwa razy nie
nazwane query, no bo tak naprawdę te query nie jest nazwane.
Gdybyśmy powiedzieli, że jest to query get
projekt, to wtedy już byśmy wiedzieli, że
pytaliśmy się o produkty i jest to produkt Łukasza.
Na razie nic nie mamy, ponieważ cash
będzie się uzupełniał razem z naszą aplikacją, a nie,
nie będziemy mutować kesza wykonując jakieś operacje na programie, co ma jak
najbardziej sens, ponieważ nie chcemy naszej aplikacji zmieniać.
Tylko ten program co jest ma być tylko do testowania różnych pól query.
A więc tutaj tak jak mówiłem, możemy sobie
to wszystko eksplorować i tak będziemy robić na przestrzeni kursu.