Apollo Client z React.js: Fragmenty
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łem Ci pokazać jak działają fragmenty, fragmenty.
Przejdźmy może do dokumentacji.
Fragmenty to nic innego jak części.
Takie kawałki do używania query, czyli żeby nie pisać tego jeszcze raz.
Tworzymy fragmenty i możemy je użyć kilkanaście razy.
Ile razy w ogóle chcemy wszystkich naszych query?
Jest to bardzo przydatne, kiedy mamy jakiś zdefiniowany interfejs, jak np.
back data dla produktów czy back data dla
kategorii, czy generalnie query dla kategorii i nie chcemy go pisać cały czas
i kopiować, to możemy do tego użyć właśnie fragmentów.
Jest tutaj cała strona o fragmentach jak można je konfigurować, jak używać?
Bardziej zaawansowane użycia, mniej zaawansowane użycia itd.
Ja Ci pokażę
dosyć podstawowe użycie, które najczęściej się używa w praktycznej pracy.
Natomiast zawsze możesz tutaj do tego linku się odwołać.
Również masz go dostępnego w źródłach.
A więc wróćmy do kodu.
I tutaj mamy właśnie to nasze query i ja widzę tutaj dwa potencjały do użycia.
Gdybyśmy mieli playera to pewnie by widział jeszcze trzeci.
Natomiast jako że nie używamy, nie używamy playera w innych miejscach, natomiast
używamy kategorii oraz używamy tych trzech podstawowych informacji o produkcie.
I tych informacji używamy na produkt details oraz na produkt.
Dlatego myślę, że możemy sobie właśnie te
informacje podstawowe wybrać i zapisać w fragmencie.
To jak możemy zdefiniować fragment mamy opisany właśnie w tym miejscu.
Fragment tworzymy za pomocą taga i musimy napisać na którym
konkretnie, na którym konkretnie polu działa dany fragment.
Więc my na jednym polu działamy na
product, a na drugim działamy na kategorii.
Więc przejdźmy sobie tutaj.
Ja bym chciał w Apollo, może nie w Client, a po prostu w Apollo.
Chciałbym stworzyć sobie taki nowy
pliczek, który nazwałem sobie fragment GPS i chciałbym tutaj zrobić właśnie eksport.
Const being product query break.
Jej będzie fragment w sumie.
I tutaj niech to będzie crawl.
Oczywiście musimy sobie tutaj go zaimportować.
Zróbmy sobie tak.
MT ok.
I tutaj właśnie sobie taki fragment zdefiniujemy.
Ja pozwolę sobie skopiować to co tutaj jest zrobione i sobie to wklejamy.
Ja bym chciał, żeby ten fragment nazywał
się właśnie basic product placement, albo może po prostu basic product.
I to będzie na typie product.
Więc to jest jeden fragment.
Ja bym chciał, żeby ten fragment używał
właśnie tych danych Protected name oraz Unit price.
I wklejamy to sobie tutaj po prostu formatowanie
i chciałbym stworzyć sobie jeszcze jeden fragment, więc stwórzmy sobie tutaj
jeszcze jeden fragment i chciałbym tutaj sobie stworzyć kategorię fragment.
Jest tutaj również gorycz.
Fragment i tutaj będziemy działać w kategorii i tutaj.
To co będziemy potrzebować to kategoria ID oraz kategorii, gdzie jest tylko name.
Jeszcze się upewnię.
Tak to jest tylko.
A więc mamy te dwa fragmenty, jest zrobione, więc teraz będę chciał sobie te
fragmenty zaimportować właśnie w tych dwóch plikach.
Pierwszym plikiem będzie nasz index, czyli jest tutaj produkt idealny.
Importujemy właśnie Basic Product fragment i on będzie importowany z.
Wyżej mamy Apollo i tutaj mamy fragment,
że jest IEM i to co musimy teraz zrobić to
w tym Groszku, ale tak jak widzisz tutaj to jest nasze query.
Musimy sobie wykonać
ten template string, ponieważ tak naprawdę to będzie wyglądało.
Wtedy całe nasze query będzie zdefiniowane
właśnie w taki sposób, czyli tak jakbyśmy sobie tutaj
zdefiniowali taki fragment i teraz będziemy go po prostu używać.
Więc żeby on był używany to tutaj właśnie takiej template string użyjemy.
Ten fragment, czyli tę nazwę naszego fragmentu musimy użyć w miejscu, w którym
chcemy wykonać te dane właśnie w taki sposób.
I podobnie zrobimy z drugim fragmentem, czyli z kategorii fragment.
Lecimy tutaj.
Oczywiście również tutaj
To musimy zadeklarować w naszym całym query i wtedy tej kategorii fragment.
Tutaj również wywołamy ok. Powinno to działać.
Przejdźmy do aplikacji. Zobaczymy czy wszystko jest w porządku.
Odśwież stronę i ok.
Tutaj szczegóły nam się pobierają.
Zobaczymy czy lista nam zadziała.
Natomiast na liście jeszcze musimy to sobie importować.
Tutaj ten już jest, nie jest potrzebny.
OK, więc przejdźmy do pracy.
Zróbmy w zasadzie dokładnie to samo.
Również skopiuj ten kod.
OK i teraz jak już skopiowałem to muszę go
sobie tutaj w tych items założyć oraz również w kategorii right.
Czyli to będzie obrazek product.
I kategorii fragmenty.
Czyli tutaj w zasadzie cały ten bajzel, całe to query mi się zredukowało.
Więc fajnie, ponieważ teraz, kiedy będę
chciał dodać więcej danych do Basica, będę mógł sobie również to zmienić.
Albo gdyby np.
była taka sytuacja, gdzie ten name zmieniłby nazwę lub chciałbym go
zawsze kasować, to również robię to tylko w jednym miejscu.
A więc po to właśnie są fragmenty. Tak to działa.
Możemy teraz zobaczyć czy wszystko działa.
Jak widzisz działa, więc wszystko jest ok.
No więc myślę, że to wszystko.
Zapraszam Cię do kolejnej lekcji.