Apollo Client z React.js: Overview Aplikacji React
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.
Witaj w kolejnej lekcji, w której
chciałbym zrobić Ci over view aplikacji jak to Power View.
Mam na myśli to, że tak naprawdę zrobiłem
już pewien market, abyś nie musiał tego tworzyć ze mną, ponieważ nie chciałbym
tutaj tworzyć takiego podstawowego kursu jak ta.
Natomiast bardziej chciałbym się skupić na tych aspektach połączenia jak ta z Apollo.
Dlatego przygotowałem już aplikację i jest
ona dostępna w źródłach do tej lekcji możesz ją sobie ściągnąć
i wtedy prosiłbym Cię abyś w katalogu front zrobił npm install czyli w tym
katalogu i odpalił aplikację za pomocą npm start oraz również w katalogu server.
Zrobiłem Münster i również odpalił
aplikację za pomocą npm start npm ram start
dwukropek łącze i wtedy będziesz miał odpalony zarówno
front server i będziesz mógł już na tej aplikacji pracować.
W kolejnych lekcjach kursu chciałbym Ci pokazać jak ta aplikacja
wygląda, więc na razie może przejdźmy do przeglądarki.
Pokażę Ci tutaj jak to wygląda pod względem wizualnym.
I to jest aplikacja Super Shop.
Jest to tak naprawdę
Paint, natomiast to jest jakaś nasza interpretacja aplikacji sklepu
i tutaj taką naszą stroną główną jest lista produktów.
Na razie są to produkty oczywiście makowe.
Za chwilkę Ci to w komponentach pokażę.
Tutaj nie ma jeszcze nic połączonego z
prawdziwymi danymi, więc jest to po prostu market.
Natomiast to co możesz zobaczyć to tutaj jeden komponent produktu.
Jest tutaj również lista produktów oraz mamy również tutaj dodaną pagina.
Tutaj nic nie działa.
Jak na razie to wszystko jest marka,
ta nawigacja, ale produkt produkt działa, więc jak przejdziemy na inną stronę np.
na jakieś szczegóły produktu, to wtedy możemy wrócić na stronę główną.
Wróćmy do strony produktu i tutaj możesz zauważyć taką tabelkę,
gdzie mamy jakieś informacje szczegółowe o danym produkcie.
To również są dane markowe, to są dane markowe, więc nie mają
nic wspólnego z prawdziwymi danymi z naszej bazy danych.
Natomiast będziemy tutaj chcieli sobie pobrać właśnie te dane zgrupowane.
Takie dane jak kategoria, cena jednostkowa
oraz ilość na jednostkę, również dane adresowe i będziemy również chcieli mieć
pewne ID, aby połączyć ten produkt z formularzem do zamawiania.
A więc kiedy klikniemy w ten przycisk Order, pojawi nam się również formularz do
zamawiania i będziemy mogli sobie wpisać adres do zamówienia i kliknąć submit.
Mamy tutaj już dodaną walidację
podstawową, a więc nie musimy się martwić tymi szczegółami designu.
To wszystko już przygotowałem za Ciebie.
Ja Ci oczywiście będę chciał to opisać jak to działa, abyś miał to też rozjaśnione w
każdym komponencie, natomiast nie będziemy tego sami już pisać.
Mamy to już gotowe.
Oczywiście w tej aplikacji momencie po
wykonaniu tego zamówienia będziemy chcieli sobie wyświetlić te usta, a więc będzie to
subskrypcja, która będzie tutaj w prawym górnym rogu pokazywała.
Hej, ktoś zamówił właśnie produkt o takiej nazwie albo taki mid.
Zobaczymy jak to implementujemy.
Natomiast tutaj chciałbym żebyśmy wprowadzili mechanizm subskrypcji, aby
było widać, że cały nasz sklep działa bardzo dobrze.
Zarówno query podane
jesteśmy w stanie te dane wyświetlić oraz jesteśmy w stanie te dane dodać,
a następnie jesteśmy w stanie się zasubskrybować do tych danych.
A więc przejdźmy może teraz do kodu.
I mamy tutaj indeks. Jest.
Ja użyłem and design do stylowi tej strony.
A więc jeżeli byś sobie przeszedł na stronę and design to będziesz mógł
zobaczyć wszystkie te elementy, które ja również tutaj stworzyłem.
I tutaj mamy to co mieliśmy wcześniej, czyli Apollo Provider.
Jest app, więc przejdźmy do Front Age.
Jest to, czy jest to reaktor autora, a więc chciałbym abyśmy mieli router i
żebyśmy mogli nawigować się pomiędzy stronami.
Czyli naszą pierwszą stroną jest
ten domyślny router, czyli po prostu slash i tutaj wyświetlamy product page.
Ja oplotły mnie strony produktowe w Layout
Gap i jest to komponent, który możemy sobie tutaj podglądnąć.
Przejdźmy tutaj i mamy komponent.
Jest to komponent czysto wizualny.
On wyświetla tutaj po prostu link do
wszystkich produktów, czyli naszą nawigację, nasz header.
A tutaj na dole mamy content, który ma jakieś padding, marginesy lampy.
I tutaj mamy renderowanie właśnie nas.
Children czyli nasz dokładnie nasz content, czyli dokładnie to.
I jeszcze to co możesz zauważyć to jest to stopka.
Czyli mamy taki po prostu czysto wizualny
komponent, który renderuje Children w środku obok Children.
A wróćmy do GAP.
Nie obok Children, a w środku właśnie jest ten Children.
To są już konkretne komponenty.
A więc na rabacie głównym wyświetlamy Product page.
I jeżeli przejdziemy do Product page to tutaj jest ten page.
To jest w zasadzie komponent, a jest to page i page.
Ma tutaj kilka stanów i te stany będę chciał Ci już opisać w
momencie jak będziemy implementować Apollo.
Natomiast możemy tutaj wyświetlić stan błędu, możemy wyświetlić stan ładowania.
Natomiast to co teraz widzisz na stronie to są dokładnie te dane.
Czyli mamy tutaj po prostu
wyświetlony komponent Product w odpowiednich odpowiednim gicie.
Ten grid również pochodzi z And Design.
Czyli po prostu użyłem frameworka, żeby nie robić tego wszystkiego samemu.
I mamy tutaj te produkty.
Jak widzisz tutaj wszystkie te dane są
stworzone ok, a więc mamy cały bok jak to stworzony.
I mamy tutaj wszystkie te dane wyświetlane.
Na samym dole mamy komponent po generacji i komponent po generacji również pochodzi
z And Design i on tutaj przyjmuje Page Cats czyli ile masz, ile mamy stron?
Aktualną stronę i ilość wszystkich stron.
Czyli Page stats.
Mam na myśli ile chcemy wyświetlać tutaj elementów na stronę.
My chcemy wyświetlać ich 8.
Więc w ten sposób na tej podstawie jeżeli
mamy wszystkich 50 i chcemy wyświetlać 8 to mamy 5.5 8.
I wtedy wyświetla nam się tutaj jakaś taka liczba stron.
W ten sposób ten komponent sobie to oblicza.
Nie musimy się tym martwić, ponieważ jest
to komponent również dostarczony sam design.
Jedyne co będziemy chcieli, żeby te dane były ruchome, a więc my również te sztywne
liczby będziemy chcieli zmienić, kiedy implementujemy machinacje.
Przejdźmy teraz do komponentu produktu.
I w komponencie produktu mamy po prostu cart.
Jest to również design.
Mamy tutaj Tak.
Jest to kategoria, którą będziemy tutaj dostawać.
W procesach mamy również statystyki.
Raczej to jest taki komponent statystyki.
Natomiast tak naprawdę wyświetla tutaj kwotę oraz mamy również link,
który jest wewnątrz betonu i link prowadzi nas do Product Product ID.
I tutaj jeżeli zerkniemy na app czy jest
to właśnie mamy taką ścieżkę zdefiniowaną, że jeżeli jest to product
jakiś tam id podstawiony to będziemy renderować product details.
I teraz jeżeli przejdziemy do strony Product details.
To tutaj wyświetlamy znowu jakieś jakąś swoją konkretną stronę.
My tutaj wyświetlamy page header, który jest dokładnie tym eterem w tym miejscu.
To jest dokładnie ten page header i ten page feeder przyjmuje takie propsy.
To jest również page sam design.
On przyjmuje propsy do kliknięcia na tą szczoteczkę.
On brzeg przyjmuje, ma mieć tytuł i ewentualną klasę.
Poza tym mamy tutaj description i to jest dokładnie ta tabelka.
Czyli to jest ten komponent description i możemy podawać deskryptory,
czyli to jest również wszystko to pochodzi z and Design.
Widzisz tutaj jeden komponent, który jest
nasz customowe Jest to order form, które za chwileczkę Ci pokażę.
I tutaj to do skryptu mamy.
Na razie jak widzisz również same dane.
To wszystko będziemy dostawać tutaj
z danego produktu React Query z Apollo Query.
I tutaj na dole mamy również jeszcze button, który po kliknięciu
robi Set Order Form Visible i Set Order Visible na true ustawia konkretny state.
Tutaj mamy już state.
Domyślnie jest to Forms Order Form Visible.
Ta flaga mówi o tym, czy nasz Order Form jest dostępny czy nie.
I to jest nasz właśnie komponent.
I ten komponent to jest nic innego jak modal.
Czyli jak klikniemy tutaj w ten przycisk,
zmienimy ten stan to pojawi się nam model, więc możemy zobaczyć.
Ten order również dostaje product details,
a więc ten protected jest ważny przy zamawianiu oraz nazwę produktu.
Nazwa produktu jest bardziej już tylko po to, żeby tutaj to wyświetlić.
Order Micro Name.
Oczywiście na On Clouds.
Również tutaj będziemy zmieniać ten stan.
Czyli kiedy klikniemy tutaj ten krzyżyk to zmienimy również stan tego statu.
Aby Order Form nie był widoczny przejdźmy do Order For.
I Order Form znowu pokazuje pewne pewne staty.
W stanie formularza jeżeli jest w formie to wtedy wyświetlamy formularz i jeżeli
jest zamówiony to wyświetlamy jakiś komunikat.
Jeżeli jest błąd to wyświetlamy błąd. To wszystko.
Będę Ci również prezentował jak już będziemy implementować mutację.
Jest to po prostu model z odpowiednimi przepisami design.
A więc jeżeli chciałbyś tutaj jeszcze
poznać więcej opcji, tych elementów, tych komponentów to możesz
wejść do dokumentacja design i tam to wszystko sobie sprawdzić.
Ja tutaj użyłem kilka prostych elementów.
Czyli jeżeli jest ok to wykonujemy handel.
Tak naprawdę my tutaj tego nie wykonujemy, bo to będzie się wykonywało na formie.
Czyli jak zrobimy finish to będzie git.
Jeżeli jest faktem, że mamy jeszcze przycisk cancel,
że możemy sobie skontrolować i mamy tutaj również forum
i tutaj mamy for CTI, tutaj jest username, przy czym to
username to powinno być tak naprawdę strict.
OK, to nie aż tak Elder.
To jest po prostu marka, który skopiowałem, więc już zapisuję.
Jest Street.
Mamy tutaj również Seed.
Później mamy kod pocztowy oraz mamy kraj.
Na końcu mamy Submit, który wykonuje tutaj, który jest tutaj skalowalny.
I w tym miejscu możemy coś z tymi danymi zrobić.
Czyli w tym miejscu będziemy robić mutacje.
I również HEAD to jest wykonywany callback kod, który zmienia stan order forma.
I to by było chyba na tyle jeżeli chodzi o te wszystkie komponenty.
Nie mamy jeszcze stworzonego komponentu
posta do subskrypcji, natomiast tym zajmiemy się osobno.
Nie chciałem go przygotowywać,
więc tworzymy go sobie od zera, ale jeżeli chodzi o całą aplikację to
myślę, że mamy wszystko pokryte i myślę, że jesteśmy gotowi, żeby startować.
A więc zapraszam Cię do kolejnej lekcji.