Apollo Client z React.js: Setup Apollo Subscriptions
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.
W tej lekcji zajmiemy się subskrypcją,
czymś naprawdę ciekawym i fajnym, ponieważ możemy dostawać dane w realtime.
Jesteśmy na stronie Apollo i tutaj widać dokumentację.
Jest tutaj kilka opisów czym subskrypcje
są, kiedy ich używać, kiedy ma to sens, a kiedy nie.
Natomiast ja bym chciał, żebyśmy w tej lekcji po prostu zastępowali sobie te
subskrypcje i podążali według dokumentacji.
Jak to zrobić?
Na początku musimy zrobić sobie zainstalować sobie subskrypcję transport
wiz, ponieważ subskrypcje oparte są o web socket, czyli każda nasza subskrypcja nie
będzie opierała się o protokół HTTPS, czyli mniej nowych requestów przez HTTP.
Natomiast musimy podpiąć się pod konkretny web socket, który eksponuje nasz serwer
i potem na ten web socket będziemy dostawać real time informacje.
Czyli ten nasz serwer będzie wysyłał nam ramki pakietu i również my będziemy
zasubskrybować ramki i będziemy te dane odbierać.
Więc na początku skupimy sobie npm install i przejdźmy sobie tutaj do terminala.
Ja tutaj będę chciał to zainstalować, a więc klikamy PPM install.
I zostało to wszystko zainstalowane.
Więc teraz wracam tutaj i musimy sobie stworzyć plik co sobie to skopiuje.
Wrócimy sobie tutaj do.
Ja jestem tutaj jako klient
stworzymy sobie właśnie taki link i tutaj zrobimy ws.
link link link.
Wiec wszystko tutaj się zgadza.
Czyli ja to po prostu skopiowałem i to co
my musimy zrobić to musimy sobie tutaj ten adres podać z naszego.
OK.
I teraz wróćmy do dokumentacji i według dokumentacji musimy jeszcze
wykonać split link z tego względu, że mamy tutaj dwa typy operacji, więc jeżeli
mamy typ operacji subskrypcji to wtedy będziemy działać na WS.
Jeżeli nie to będziemy działać na HTTP.
I tutaj mamy też również HTTP link i funkcję split.
Musimy sobie te dwie czy dwie te dwa moduły zaimportować.
No więc przejdźmy tutaj.
Zróbmy sobie ten import jest to split oraz
http link i musimy również taki http link stworzyć.
Na razie mieliśmy po prostu URL, natomiast musimy również stworzyć taki http link.
W tym miejscu.
I to będzie właśnie ten nasz outfit.
Okej i teraz będziemy chcieli wykonać te funkcję split.
Więc wykonujemy trening w tym miejscu.
I ten split będzie tutaj jeszcze musimy pobrać, więc jest tutaj.
Teraz ten split dostaje te dwa linki.
I działa to tak, że on tutaj dostaje definicję i z query bierze sobie te
definicje, które dostaje w argumencie i w tym miejscu on zwraca.
Czy jest to operation typu subskrypcji?
Jeżeli tak to bierze web string, a jeżeli nie bierze sobie http link.
I ostatnia rzecz, która nam została do
zrobienia to ten link przekazać do naszego klienta.
My wcześniej używaliśmy URI, natomiast my
tak naprawdę chcemy używać link i to będzie split link.
I również tutaj w dokumentacji jest to wyszczególnione, że jeżeli chcemy używać
linka to musimy właśnie tutaj linka i użyć tego split linka, który się tutaj wykona.
Możemy to teraz zapisać i odpalić aplikację.
Więc MPM start i zobaczyć czy wszystko będzie w porządku.
OK i strona się odświeżyła.
Jest w porządku, qwerty się wykonuje, a więc działa.
Czy działa sprawdzimy już sobie w kolejnej lekcji.