Apollo Client z React.js: Ćwiczenie - Szczegóły produktu
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 chciałbym, żebyś sam zaimplementował szczegóły produktu.
Jesteśmy tutaj w tym product details.
Komponent pliku index jest.
Ja tutaj napisałem Ci co trzeba zrobić.
Przede wszystkim trzeba pobrać protected z query parents, które znajdują się w URL.
Czyli jeżeli zerkniesz sobie tutaj to na
przykład właśnie ten produkt AID to jest to 29
i możesz to zrobić za pomocą kółka już parametr, który jest jak router dom.
Następnie chciałbym żebyś zaimplementował juz query aby pobrać szczegóły
tego produktu, dodać również loader stats, czyli podobnie
jak to zrobiliśmy na stronie listy produktów.
Możesz również tam zerknąć i zobaczyć jak to wygląda.
Dodatkowo żebyś wyświetlił wszystkie te
dane widoku, żebyś nie musiał już tutaj wertować dokumentacji.
Oczywiście możesz to zrobić.
Możesz sobie wejść i podglądnąć jakie mamy dostępne metody.
Natomiast jest tutaj dostępna metoda
product, która przyjmuje argument filter if argument w filtrze
trzeba podać właśnie ten produkt id, żeby pobrać ten konkretny produkt.
I tutaj ja również dodałem już pola, które będziesz potrzebował dla widoku
i również tutaj subfora odnośnie dostawcy to są również potrzebne pola dla widoku.
Kiedy zerkniemy sobie tutaj, to właśnie
tutaj mamy ten komponent name, kontakt typu adres itd.
Więc to są właśnie te Company Name, kontakt oraz adres.
I tutaj są również te pola jak kategoria
JUnit Price, Entity Unit, czyli to są dokładnie te pola, które tutaj pobieramy.
Więc mam nadzieję, że Ci się uda tutaj to wszystko zrobić.
Jest to mam nadzieję, proste zadanie po tych lekcjach, które już aktualnie
mieliśmy, więc myślę, że zrobisz to dosyć szybko.
Natomiast jeżeli będziesz miał jakieś
problemy, to za chwilę zrobimy to wspólnie.
Natomiast teraz chciałbym, abyś zapoznał video i zrobił to zadanie samodzielnie.
Dobrze.
Mam nadzieję, że udało Ci się zrobić to zadanie.
Jeżeli nie, to nie stresuj się, za chwilę to zrobimy sami.
Będziesz mógł sobie porównać co Ci nie wyszło, a jeżeli Ci wyszło to możesz
również oglądnąć tą lekcję do końca, aby zobaczyć jak my to zrobimy.
Natomiast również możesz przejść do kolejnej lekcji.
To już jest zależne tylko i wyłącznie od Ciebie.
Więc przejdźmy sobie tutaj do Product Details.
I ten pierwszy punkt, który mamy to produkt Joseph Adams.
Więc tutaj sobie właśnie ten produkt right wezmę.
Nie jestem pewny jak się ten produkt nazywa.
Za chwilę to sobie sprawdzimy.
Mam na myśli jak się ten parametr nazywa.
I teraz musimy sobie zaimportować parametry z react dom.
No dobra, ja bym jeszcze chciał zobaczyć jak się ten parametr tak naprawdę nazywa,
więc przejdźmy do MGS i tutaj mamy produkt.
Okej, czyli tak się ten parametr nazywa
i tutaj będziemy chcieli ten produkt wziąć, więc zobaczmy czego mamy.
To jest pierwszy punkt.
Odśwież stronę, konsola i okej, mamy już tutaj produkt.
Zauważ, że ten protected jest string, a my tutaj musimy przekazać number,
ponieważ gdyby był to string to wyglądałoby to tak.
Więc musimy sobie również sforsować
ten protected zanim go przekażemy do zmiennych,
więc to jest ważny punkt, aby na to zwrócić uwagę.
Więc ten pierwszy punkt mamy gotowy.
Teraz musimy zaimplementować sobie już Query, a więc zróbmy sobie tutaj
może po prostu Query Product Product Details i tu będzie oczywiście gra SQL.
Tak więc sam projektujemy sobie również ten graf.
Z tego możemy sobie zaimportować z Query z Apollo Client.
Dobre i tutaj będziemy chcieli sobie tą
górkę stworzyć, a więc kopiujemy to sobie w to miejsce.
I będziemy musieli przekazać tutaj zmienną, a więc tutaj będziemy musieli
stworzyć taką zmienną dla tej query i to będzie właśnie projekt.
I to z tego co pamiętam to jest typ float, nie integer.
I tutaj będziemy musieli zrobić projekt.
Najlepiej właśnie przekazać dobra.
Dobra, teraz tak.
Przejdźmy sobie tutaj.
Mamy już square protected, a więc zróbmy sobie connect data mining.
Pobieram od razu loading, ponieważ mamy
jako kolejny punkt żeby zaimplementować loader i wykonajmy sobie Yu Square.
I to będzie nasze query get details.
I musimy tutaj zrobić sobie oczywiście zmienne.
I tak naszą zmienną będzie protected, przy czym będziemy musieli to.
Spasować.
Dobra i teraz to powinno działać.
Możemy zapisać i zobaczyć czy query się wykonuje.
Zobaczmy na tworki.
Jakieś kwiaty się tutaj wykonało, tylko wyczyszczę konsole, żeby było to widoczne.
Wykonało się. Query Tutaj przekazaliśmy produkt
i dostaliśmy Preview data date product i mamy wszystkie informacje o produkcie.
Więc teraz chciałbym żebyśmy zrobili stan ładowania również.
A więc tutaj pod biustem zrobił sobie ring i teraz będzie miał ring component.
I ja sobie wrócę jeszcze do WinISD żeby zobaczyć czy jest tutaj komponent BR.
OK. Ding.
Dobra, teraz powinien mieć już również dostępny w tym miejscu.
On był na chwileczkę, nie wiem czy
zauważyliście, Natomiast on na chwileczkę tutaj miga, więc ten loader jest ok.
Mogę tutaj w zasadzie powiedzieć, żeby
pokazać, że ten mały tak naprawdę jest i wtedy tam jest.
Natomiast jeżeli jest tam loading, no to ten loader tutaj się pojawi i.
Czyli to jest gotowe, to jest gotowe.
Zostało nam tylko wyświetlenie danych.
A więc przejdźmy sobie do tego miejsca i będziemy sobie restrukturyzować obiekt.
Czyli będziemy tutaj musieli sobie z tych danych wybrać to co chcemy.
Czyli mamy WR, mamy produkt.
Czyli tutaj będziemy chcieli sobie.
I tutaj z produktu będziemy chcieli w zasadzie mieć.
W sumie to najmniej unit unit czyli that's the end.
Również będziemy chcieli sobie wybrać kategorii oraz split.
Dobra, mam nadzieję, że nie zrobiłem literówki.
No dobra, i teraz będziemy chcieli sobie tutaj to wszystko wyświetlać.
Czyli mój produkt będziemy musieli przekazać nam teraz unit price.
Tutaj mamy właśnie ten unit pracę.
My dodamy jeszcze znaczek dolara do tego quality per unit.
Więc tutaj po prostu sobie to wyświetlamy.
Kategorie i kategorie mamy wyświetlone w tym miejscu.
W zasadzie to nie jest kategoria, a to jest w kategorii name, więc musimy tutaj
wyświetlić kategorii name i player i może player.
Tutaj jeszcze te struktury użyjemy.
Już nie będę szedł dalej w tym obiekcie.
Ponieważ już lekko dosyć poszedłem i teraz będziemy chcieli właśnie sobie
wziąć kontakt nam kontakt oraz adres
e-mail oraz adres.
Dobra i teraz ja będę chciał to sobie
wyświetlić, czyli contact name będę w tym miejscu wyświetlał, w
tym miejscu będę wyświetlał kontakty, a w tym miejscu będę wyświetlał adres.
I teraz adresy mamy tutaj City oraz
Street, a więc tutaj będziemy chcieli zrobić sobie City.
W tym miejscu będziemy chcieli sobie zrobić street.
Dobra, zapiszmy te zmiany.
No i dobra, wygląda na to, że to działa.
Mamy tutaj właśnie informacje o Priority.
Może być te dane w ten sposób.
Mamy tutaj również unit price unit.
Działa to całkiem fajnie.
Możemy sobie wrócić
do poprzedniej strony i na przykład mieć inny produkt i również tutaj to mamy.
Teraz kiedy wrócimy na ten produkt to możemy jeszcze zerknąć na kasę.
I w koszu mają właśnie taki produkt i to jest priorytet.
4.
Mamy tutaj zapisane te wszystkie informacje.
Wszystko, co tutaj mieliśmy, to wszystko się zapisało.
Teraz zerknijmy sobie jeszcze na konsole.
Włączyliśmy te konsole.
Wróćmy tutaj i jeżeli już byłem na tej stronie, to ja
się nie wykonuje, więc to jest również ważne do zauważenia, że już się wykonuje.
Tutaj również byłem,
tutaj nie byłem, request się wykonał i również klucz jest update, a więc np.
ten albo jeszcze nam się nie zaadaptował.
Wróćmy jeszcze do gry.
Bo.
Tu i nie ma więcej informacji.
Jest 7.
Natomiast kiedy w niego wejdę, to tutaj dopisałem się.
Ta informacja będzie rozmiar drzewa.
I działa to dlatego, że jako ten filtr
mamy ten protected i tutaj również właśnie ten protected pobieramy
i on wtedy sobie definiuje za pomocą tego protected i rozszerza ten obiekt też.
A więc działa to w bardzo fajny sposób i dzięki tylko i wyłącznie temu klientowi
jesteśmy w stanie sobie zidentyfikować obiekty.
I teraz wszystko mamy w Kaszuba, więc cała
magia wolno się tutaj dzieje jeżeli mamy fajnie skonfigurowane.
No dobra, to wszystko w tej lekcji i ja zapraszam Cię już teraz do kolejnej.