Apollo Client z React.js: useSubscription hook
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 skupimy się na rachunku jest subskrypcja.
Tutaj jesteśmy na stronie dokumentacji i
to co jesteś w stanie zauważyć pewnie na pierwszy rzut oka to to, że tak naprawdę
ten Hugo to są chibi zwraca data, zwraca loading oraz error.
I tutaj jest również informacja, że
ta data jest zwracana za każdym razem, kiedy dostaniemy nowe dane.
To jest jeden ze sposobów jak możemy tutaj działać.
Czyli możesz sobie wyobrazić, że nowy
state w komponencie się pojawi i na nowy stan możesz sobie złapać
renderowanie komponentu, że jest coś nowego w tej subskrypcji.
Również takim drugim sposobem, który
często jest używany jest użycie Subscribe data i tutaj na tym callback.
Po prostu jeżeli się podepniemy do tego
kubełka, to będziemy dostawać właśnie w argumencie w pierwszym argumencie te dane,
które przychodzą za każdym razem do subskrypcji.
Również jest tutaj opcja Skip shut raz słabe, variable subscribe itd.
Czyli to jest po prostu gra full. Tak więc myślę, że nie ma co.
Zdecydowanie ta sama analogia do
Query i just in time, więc będzie to tak samo prosto działało.
Natomiast będzie trochę więcej fajerwerków, ponieważ działa to od kopa.
Więc dobra, wracamy do aplikacji.
I jeszcze jedna rzecz ja bym chciał tutaj użyć And Design, a konkretniej
Action on Design i ten framework ma taki właśnie komponent.
Nazywa się właśnie notyfikacje.
Ja bym chciał użyć właśnie tego komponentu do wyświetlania notyfikacji.
Wiecie, pokazać jak on wygląda.
Więc powiedzmy, że zrobię po prostu na
wywołaniu komponentu No Fiction open i on przyjmuje obiekt gdzie jest message.
I.
Teraz jak to zapiszę wejdziemy do aplikacji.
Okej, Detection jest nad eksportem, więc
pozwolą mi sprawdzić czy nie zrobiłem literówki.
Okej, oczywiście zrobiłem.
Zobaczmy teraz.
I tutaj został wyświetlony właśnie taki.
Taka notyfikacja, taki toast.
No więc fajnie działa.
To teraz będziemy chcieli zobaczyć,
a raczej nie zobaczyć, a zaimplementować to z subskrypcją.
A więc to jest generalnie nasza funkcja,
którą będziemy otwierać na każde nowe dane.
I teraz będziemy chcieli sobie zaimportować ten hokus
pokus subskrypcję naraz od razu, ze importujemy sobie tak ok.
I będziemy chcieli tutaj napisać swoją własną subskrypcję.
A więc stwórzmy sobie tutaj subskrypcję.
No i to będzie create to Artek, więc created order.
I oczywiście gra, tak i tutaj będziemy tworzyć subskrypcję.
Nie musi to być jakieś szczególnej nazwy.
Możemy dodać sobie tutaj order Create.
W zasadzie to już jest ważne,
ponieważ tak się nazywa metoda w w API i teraz tutaj będziemy chcieli dostać
Order ID i tutaj będziemy również szukać ship adres.
To jest to, co wypełniamy sobie w zamówieniu i pod adres.
Zadajemy sobie Street City
i myślę, że to nam w zasadzie wystarczy wyświetlić jakieś podstawowe dane.
I teraz tak zaimplementować sobie subskrypcję.
Więc tutaj robimy sobie koncepty
subskrypcji i oczywiście subskrypcji ten order.
Czyli stworzenie zamówienia się subskrybuje.
I tak jak w dokumentacji to jest dokładnie to samo GB.
Natomiast my nie będziemy obsługiwać
loading error w tym miejscu, ponieważ ja będę chciał wyświetlić po prostu te dane.
Tak w ogóle w jakim komponencie chciałbym to wyświetlać?
Chciałbym to gdzieś na samej górze strony,
więc nie wiem czy zauważyłeś, że jest to w komponencie audiencji.
Ten layout jest wyświetlany zawsze dla każdej strony.
Jest to komponent Layout app i on tutaj wyświetla albo jest albo product.
Czyli jeżeli dodam to do layout to będzie się to wyświetlało zarówno na Product
detail się na Product page, czyli na najwyższym jakby
komponencie i to to był mój cel dla tego właśnie tutaj w tym komponencie pracujemy.
Dobra, więc wracając do pracy teraz tak dostajemy data i data.
Możemy sobie tutaj zalogować i zobaczyć czy ta subskrypcja działa.
Jeżeli działa to będziemy chcieli dodać
juz efekt i na juz efekt i na każdej zmianie data wyświetlać nowy toast.
A więc na razie po prostu to sobie zapiszmy i żeby zobaczyć czy to działa
możemy zerknąć, że dostaliśmy AM define, czyli coś już dostajemy z skryptem.
Natomiast wejdźmy sobie w network i tutaj w natłoku wybierzmy zakładkę Socket.
Spróbujmy jeszcze raz odświeżyć.
I jak widzisz mamy tutaj Nord weekend.
Czyli to jest właśnie ten nasz URL do którego się podpisaliśmy.
I tutaj możemy sobie zerknąć na MSS.
I tutaj mamy informację, że właśnie taki klient się do serwera i
dostaliśmy również zwrotkę z serwera, że się serwer podłączył.
Odpowiedział nam czyli podłączyliśmy się.
Nasz web socket powinien działać i powinien odpowiadać.
I teraz jak możemy to przetestować?
Możemy wejść sobie tutaj,
tutaj odpalić sobie konsolę, będziemy śledzić czy jakieś nowe konsole będą się
wyświetlać, a obok możemy wyświetlić sobie drugą stronę.
I tutaj będziemy w zasadzie bez konsoli będziemy tworzyć zamówienia.
A może pozwól mi podzielić ekran na dwie części?
OK, i teraz tutaj mamy właśnie tą naszą aplikację.
Tutaj będziemy śledzić konsolę, a tutaj będziemy to zamawiać.
A więc dobra, ja tutaj sobie wpiszę jakieś dane.
I tutaj Polska myślę ok, wysłałem i teraz może zobaczyć czy coś się pokazało.
A więc od razu drugi klient
dostał informację, że coś tutaj dostaliśmy i jest to the right.
I to są dokładnie te dane, które wpisałem.
Jeżeli zerkniemy jeszcze raz na web socket
i tutaj na te ramki, które dostawaliśmy, czy uda mi się to?
W taki sposób podglądnąć to mamy tutaj, że
dostaliśmy właśnie tutaj dane z serwera i dostaliśmy tutaj tj.
data order, created je w środku ships adres itd.
Kiedy to sobie rozwiniemy to widzimy, że to jest ten pilot.
Możemy to zrobić jeszcze raz, żebyś to zobaczył.
Czyli zróbmy sobie tutaj jakiś inny order.
Jak widzisz, tutaj również ramka z
wierszyka to przyszła mama, więc również naszym by się odpięła.
Czyli nasza aplikacja dostaje informację o tym i więc mamy taką real time aplikacja.
Jeżeli jeden klient coś robi, to drugi również tutaj otrzymuje tę informację.
I teraz to co my będziemy chcieli zrobić,
to będziemy chcieli tutaj wyświetlać te posty, więc zmienimy to troszeczkę.
Więc w tym miejscu będę chciał wyświetlać te posty na każdym zamówieniu.
Za chwilę ten formularz sobie jeszcze raz wypełnimy.
Wróćmy do Discorda.
Tutaj mam skrót i tutaj będziemy chcieli dodać efekt.
Czyli za każdym razem jak te dane są to ja
będę chciał wykonać tą funkcję notyfikację.
Czyli zróbmy sobie tutaj user effect.
I tutaj będę chciał jako dependency dodać data.
Czyli za każdym razem jak data się zmieni
to będę chciał sprawdzić czy ta data w ogóle istnieje.
Jeżeli istnieją to wtedy będę chciał tutaj to restrukturyzować.
Tego loga możemy już wyrzucić i będę
chciał wykonać tę funkcję I tutaj będę chciał dostać message.
Więc tutaj w message może zrobimy coś
takiego, że może na razie po prostu formatowanie, żeby było to czytelniejsze.
OK i teraz ja bym chciał w message powiedzieć coś takiego New Order Created.
I tutaj chciałbym jeszcze dostać numer tego orderu czyli Order Aid.
Za chwilę to sobie wyciągniemy
z tych danych i tutaj chciałbym jeszcze dostać description i description.
To może być właśnie screen tutaj
dostaliśmy Street City, więc będzie to Street City.
I teraz tutaj stwórzmy sobie te zmienne.
Tak więc zróbmy sobie konto i tutaj.
Jeżeli pamiętasz z konsoli loga to właśnie tam było order created.
Czyli właśnie to jest powtórzona ta logika.
Czyli tutaj żyje ta struktura logika order created i tutaj chcemy sobie
wyciągnąć Order ID i również chcemy sobie wyciągnąć adres.
Czyli tutaj będziemy wyciągać stąd street oraz CD.
OK i to powinno działać.
Jedyne co musimy zrobić to zaimportować sobie juz efekt, więc zrób tutaj import.
Więc efekt jak i zobaczmy czy to nam działa zapisane.
Wróćmy do aplikacji.
Na razie nic się nie dzieje, więc wykonajmy jakieś zamówienie.
Niech tutaj będą Aleje Warszawa.
I niech to będzie.
I jak widzisz w dwóch aplikacjach dostałem to, ponieważ moja aplikacja również się
tutaj zasubskrybować, ale również zasubskrybować się druga aplikacja.
W dwóch aplikacjach dostałem taką informację.
No więc fajnie działa.
To możemy teraz spróbować jeszcze raz wykonać sobie taką
dokumentację i zobaczymy, że znowu w tych dwóch aplikacjach się to pojawi.
Niech to będzie znowu Sosnowa Kraków.
OK, niech będzie Polska.
I jak widać wszystko działa.
Mamy tu mamy
tłusty, ale tak naprawdę co najważniejsze tutaj mamy połączenie z naszym serwerem.
Tutaj dostajemy te dane, a więc wszystko działa w jak największym porządku.
No i w zasadzie to tyle.
Nie ma tutaj żadnej większej magii jeżeli chodzi o web sekrety.
Nie ma większej magii jeżeli chodzi o
subskrypcje implementacją jak sekretów właśnie tych subskrypcji.
Jeżeli chodzi o Apollo jest to również bardzo proste.
Sprowadza się to do użycia subskrypcji i reagowania na te dane.
Jeżeli nie chciałbyś działać tutaj z efektem, a wykonywać jakieś konkretniejsze
inne działania, to oczywiście również możesz tutaj i w tym miejscu.
A w tym miejscu podpięcie na all
data i ta funkcja tutaj również te dane będzie dostawała.
A więc tymi danymi mógłbyś tutaj również
coś zrobić, gdybyś nie chciał tutaj używać efektu jachtowego.
Natomiast tak to generalnie działa.
Tak musisz reagować na te dane i myślę, że to wszystko jeżeli chodzi o subskrypcje.
Zapraszam Cię do kolejnego rozdziału.