Apollo Client z React.js: useQuery 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.
Nadeszła pora, aby w końcu ubrudzić sobie ręce.
Kodowanie skończył.
Napiszemy trochę kodu w naszej aplikacji.
To co tutaj widzisz to jest to strona dokumentacji.
Odnośnie query jest Apollo ma całą stronę
odnośnie tego jak robić zapytania o dane, jak używać use query jak
co, jakie Polaris i można tutaj wprowadzać w kontekście problemów z network cam.
Tutaj mamy właśnie to podstawowe API,
które za chwilkę będziemy sobie implementować.
Mamy tutaj informacje odnośnie kierowania
w zasadzie, że zawsze jest to kasowane kiedy dostaniesz jakieś dane z serwera.
Tutaj jest informacja, że automatycznie jest to skorelowane lokalnie.
Dzięki temu
egzekucja tych query jest bardzo szybka i dlatego to jest właśnie ten świetny punkt.
Ta warstwa kierowania jest tutaj właśnie o tym też informacja.
Gdybyś chciał o tym doczytać, jak najbardziej możesz to również zrobić.
Natomiast tutaj jest też informacja jak
jak zrobić coś, co zrobić samodzielnie, kiedy masz jakieś problemy z serwerem.
W zasadzie dzieje się to bardzo rzadko, tak jak również tutaj jest to opisane.
Natomiast kiedy potrzebujesz zrobić jakiś
referat link, kiedy masz jakieś problemy z serwerem to również jest tutaj taka opcja.
Masz również opcję Revenge do wykonania.
Całe całe to API query jest tutaj opisane
właśnie na tej stronie, więc link również znajdziesz w źródłach.
Gdybyś tego potrzebował, możesz również Inspektoracie Stany.
Co się dokładnie stało z tym network statusem?
Tak więc mamy tutaj całą gamę rzeczy.
Natomiast ja Ci pokażę to, co zwykle wystarcza, to, co zwykle wystarcza do
większości, większości aplikacji i nie trzeba więcej nic robić.
Jedna ważna rzecz jeżeli chodzi już query
to jest właśnie policy i chciałem o tym porozmawiać, bo
generalnie też policy jest to rzecz dosyć specyficzna.
Natomiast całe Apollo jest oparte na celu.
Dzięki temu pole jest bardzo szybkie.
Dzięki temu ta warstwa kesza jest automatycznie merge.
Ona działa bardzo sprawnie.
Natomiast czasami jest taka sytuacja, gdzie nie chcesz nic kasować i wtedy
potrzebujesz powiedzieć, że aj, ja chcę tutaj dostać network on albo
też policy, więc to też jest ważna rzecz, że jeżeli będziesz miał taką sytuację, to
możesz tutaj wejść w Police i normalnie działa to tak, że cash first.
Możesz również ustawić, że chcesz online, czyli jeżeli wiesz, że ktoś wchodzi np.
w Twojej aplikacji
na jakąś stronę, gdzie już te dane na pewno wcześniej zostały
ściągnięte, bo nie da się inaczej wejść na tą stronę, to wtedy możesz tylko skasować
te dane, bo nie ma sensu wykonywać requestów.
Możesz również ustawić kieszen Network Network oni też.
I tutaj jest ta różnica, że mi nawet jeżeli się wykona
w tym konkretnym przypadku query to i tak zapisze dane do kesza,
a nokaut wykona się w taki sposób, że nie zapisze tych danych do kesza, więc
zadziała tak jak networking, ale nie zapisze danych do kesza.
Więc to są właśnie takie przypadki.
Ja nie chciałbym w tym kursie przechodzić
przez wszystkie z nich, bo myślę, że nie ma to sensu.
One są bardzo podobne i dosyć specyficzne dla każdej sytuacji.
Natomiast ważne jest, abyś pamiętał, że
takie coś tutaj istnieje i że możesz tutaj również sobie to ustawić.
Czasami jest to naprawdę przydatne, więc ważna jest ta świadomość.
I tutaj na końcu mamy już Query API, więc możesz sobie zobaczyć co tak naprawdę
jakie wartości możesz widzieć ustawić dla naszego query.
No dobra, ja myślę, że możemy teraz przejść już do pisania kodu.
Faktycznie, A więc to co mamy do zrobienia w tej lekcji to
spakowanie tej listy tych produktów i moje.
Mój pomysł generalnie to taki, że może na początku napiszemy
sobie query, potem przejdziemy do kodu, jest kolumna i po prostu to query dodamy
już dla jest query i to jest dosyć wygodny sposób pracy, który Ci również polecam.
Czyli na początku eksplorowanie naszego serwera pokładowego.
Jakie opcje tam mamy?
Więc możemy przejść do dokumentacji.
Może tutaj troszeczkę jeszcze sobie to ściągniemy.
Przejdźmy do Query.
Tutaj mamy WR i mamy tutaj coś takiego jak Product listy.
Obok Product jest mamy również Product Animation i Product.
Dzisiejszy jest dosyć ważny, ponieważ product zwróci nam wszystkie elementy
jakie mamy w bazie, czyli nam je po prostu wylatuje.
My byśmy chcieli jednak, aby one się działy.
W tej lekcji nie zajmiemy się samą nazwą,
ponieważ chciałbym zrobić o tym osobną lekcję.
Dlatego, że taki napis kopiujemy skonfigurujemy cały mechanizm z kesza.
Jak można wykorzystać Apollo do tego, aby łączył te dane bez potrzeby stworzenia
jakiegoś swojego stylu do nacji, więc to będzie bardzo ważne.
Natomiast i tak użyjemy w tym momencie
metody Product Nation tylko po to, aby po prostu pobrać jedną stronę i tylko 8
wyników, czyli tak jak tutaj mamy właśnie domyślnie 8 wyników na stronę.
Tyle będziemy chcieli pobrać, ale nie będziemy jeszcze implementować
tego mechanizmu tutaj klikania w tą nacje to zrobimy w kolejnej lekcji.
A więc zobaczmy co nam tutaj oferuje product na dzisiejszym.
I tutaj możemy podać jako argument page
page i możemy wybrać sobie kontaktem co nas głównie będą interesowały te itemy.
No i tutaj możemy dostać Product id name Player id, Category id.
My raczej będziemy chcieli tutaj dostać
przede wszystkim Category i kategorie name.
Tutaj mamy właśnie kategorię name,
ponieważ tutaj wyświetla nam się ta kategoria.
Obok Category Name mamy właśnie name, czyli tutaj ten name
i mamy również unit price, czyli te w zasadzie informacje nas interesują.
Oczywiście jeszcze żeby przejść tutaj do
strony szczegółów to będziemy potrzebować również Product ID.
No dobra, więc spróbujmy napisać sobie takie query.
Stwórzmy sobie query get.
Projekt.
I tutaj jako ten jeden argument to będzie właśnie Page.
W zasadzie nie tutaj.
W tym naszym już query.
A więc zróbmy WR product dzisiejszym.
I tutaj możemy podać sobie Page i Page.
Niech to będzie pierwsza strona oraz per page.
Nie będziemy chcieli 8 tych stron pobrać.
I teraz będziemy chcieli wybrać te pola.
I tutaj możemy mieć items.
No więc weźmy te items
i w tych tematach będziemy chcieli na pewno dostać produkt IT.
Tak jak mówiliśmy, będziemy chcieli dostać również JUnit
Price i gdybyś się zgubił, to zawsze klikając
tutaj to możesz się przekierować do konkretnego miejsca.
Czyli jak widzisz ja klikam tutaj
w te miejsca i już jestem w tym miejscu w dokumentacji.
To jest naprawdę fajne.
Jeżeli kliknę items to również tutaj dostanę tą informację.
Unit price również dostałem informację, że jest to float,
a co fajniejsze teraz jeżeli wybiorę category przejdę do kategorii to już
jestem w tym miejscu i widzę jakie kategoria ma
pola, więc można się tutaj też w fajny sposób nawigować pisząc query.
Mamy produkt ID, mamy unit price, mamy kategorię, mamy name, nie mamy jeszcze
name dla naszego query, naszego query, a dla naszego produktu.
OK, fajnie.
Teraz mam już te itemy, więc spróbujmy sobie wyklarować te dane.
Zobaczmy co się stanie.
Widzę, że mamy tutaj jeszcze jakiś problem syntax error.
OK, nie potrzebujemy w zasadzie tego.
Możemy jeszcze raz spróbować.
OK, i teraz już wszystko działa.
A więc tutaj dopóki nie mamy argumentów,
to wtedy nie musimy tutaj dodawać tych nawiasów.
No dobra, czyli query zrobiliśmy.
Skopiuj je sobie.
Bardzo wygodny sposób Można w ten sposób pisać query.
Również możesz to robić w programie, więc możesz również sobie wejść na localhost
3tys slash nor point i tam w programie sobie pisać to query jeżeli wolisz w taki
sposób i wtedy możesz zobaczyć również te dane.
Później takie query skopiować możemy i możemy przejść do Xcode.
Więc przejdźmy do Desmonda.
Jak jest gdzie mamy już utworzony plik?
Front source Pages Product
index jest, czyli ten produkt page, który już Ci wcześniej pokazywałem.
Jedną rzeczą, na którą chciałbym żebyś
zwrócił uwagę jest to, że mamy tu kilka stanów.
Tych stanów Ci jeszcze nie pokazywałem,
więc te flagi oznaczają stany tej aplikacji, więc chciałbym Ci to pokazać.
Na początku jeszcze zapiszmy to query, żebym go nie zgubił, więc stwórzmy tutaj
sobie const get product, czyli towary, które sobie właśnie
skopiowałem i teraz będziemy otwierać w que.
Tak i tutaj sobie wrzucimy właśnie to query.
A więc mamy tutaj właśnie to query.
Ja bym jeszcze tutaj chciał sobie zaimportować tag.
A więc zróbmy import tag from Apollo client.
Dobra, fajnie i na razie to zostawmy, bo
chciałbym Ci jeszcze pokazać te stany tej aplikacji.
Czyli tutaj pierwszym naszym stanem jest data, a drugim loading.
Jeżeli data jest na true to wtedy wyświetlamy wszystkie nasze kolumny.
Natomiast zobacz, że tutaj również jest if.
Jeżeli data nie jest true.
To wówczas wyświetlamy tutaj komponent
empty i jeżeli jest loading wyświetlamy loader.
Jeżeli jest error wyświetlamy error i teraz pokaże Ci jak to wygląda.
Czyli powiedzmy, że nie mamy danych.
Już się nic nie ładuje i nie mamy błędów.
Czyli po prostu taka sytuacja kiedy nie mamy nic w bazie danych.
Przejdźmy na stronę.
I wtedy mamy taki state.
Kolejny stan to kiedy nam się coś ładuje.
Czyli mamy loader i kolejny stan kiedy mamy jakiś błąd.
No więc zróbmy błąd.
I wtedy mamy sampling i mamy przycisk retro.
A więc tak wygląda nasz.
Tak wygląda nasz nasz
kraj I jeżeli chodzi o ten retro i to właśnie tutaj moglibyśmy np.
zrobić tam przycisk reset i dokładnie to zrobimy.
Natomiast na razie zajmiemy się już implementacją tego naszego query.
No więc stworzyliśmy sobie to query.
Mamy tutaj przekopiować to nasze query.
Pobieramy pierwszą stronę i 8 produktów i teraz będziemy chcieli użyć już Query.
A więc importujemy tutaj już query i te wszystkie stany możemy usunąć.
Ponieważ te stany przyjdą z ust Query, więc tutaj dostaniemy datę,
dostaniemy loading oraz dostaniemy w tym miejscu również.
Ding oraz Rock You Square.
I tym pierwszym argumentem jest właśnie to nasze query, które tutaj stworzyliśmy,
a drugim argumentem będzie będą opcje, których na razie nie mamy,
więc możemy tego na razie w ogóle nie uzupełniać.
No dobra, teraz to powinno działać.
Natomiast jak zauważysz, przejdźmy do przeglądarki.
Nic się tutaj nie zmienia,
wyświetlane dalej jest wszystko tak jak się wyświetlało.
Jedyna różnica jest taka, że mamy tutaj już produkcję i również jeżeli zerkniemy w
to również tutaj mamy już Where Product Imagination, a nie mamy.
A więc coś już się w tym kraju zaczęło tworzyć.
Natomiast nie możemy dostać się do tych danych,
ponieważ wyświetlamy dalej te dane makowe, więc to musimy zmienić.
Ale jeżeli zerkniemy we wtorki, to tutaj dostajemy właśnie dane w taki sposób.
A więc musimy restrukturyzować obiekt data
do zera do Product Editions, czyli dokładnie tak jak to działa w Query.
Jeżeli jesteś z tym zaznajomiony, to powinieneś oczywiście to również wiedzieć.
A więc pod tymi nazwami pod logiem je
możemy stworzyć sobie tutaj const i tutaj możemy sobie to struktury zabrać.
Czyli idziemy do biura WR idzie do Product
Manager Nation, a Product Nation idzie do Items, czyli taka duża do struktury.
Zakładamy, że te dane zawsze tam będę.
Jest to dosyć ryzykowne, natomiast możemy tak założyć na potrzeby tego kursu
i wtedy będziemy mieć tutaj dane i teraz to items możemy sobie tutaj wyświetlić.
A więc tutaj. W zasadzie w tym newsie chciałbym zostawić
mój rok, a tutaj chciałbym stworzyć sobie items map i będę chciał tutaj tego jednego
itemu sobie renderować i ten moim tempem
będzie w zasadzie ta kolumna więc zróbmy to w ten sposób
to możemy troszeczkę poprawić i tą resztę kolumn możemy sobie usunąć.
Więc usuńmy te kolumny i teraz chciałbym
wyświetlić tutaj te dane, które dostaliśmy właśnie z tymi tematami.
A więc dostaliśmy na pewno i oni pracy również.
Możemy tutaj to zrestrukturyzować.
Dostaliśmy poza Unit PRISM na pewno Name.
Dostaliśmy również produkt HIT i dostaliśmy również kategorie kategorii.
Również możemy sobie zrestrukturyzować i
zrobić sobie kategorii i tutaj zrobić nam jako kategorii name.
Jeżeli nie jesteś fanem takiej
restrukturyzacji, to możemy tutaj po prostu zrobić kategorii name.
Też będzie to w ten sposób działało, więc w zasadzie jak wolisz.
Dobra, więc zróbmy może to w ten sposób Product Hit.
Tutaj jeszcze im brakuje i zróbmy tutaj kategorię.
Wydaje mi się, że tak będzie lepiej, bo
już się tutaj zaczęło to robić troszeczkę nieczytelne.
Więc może faktycznie zróbmy to w ten
sposób, że tutaj mi się wyświetlimy kategorie.
Mam tutaj unit prace w tym miejscu
protected i w tym miejscu niniejszym protected.
Oczywiście i w tym miejscu wyświetlimy name.
I jeszcze jedna ważna rzecz, czyli tutaj
musimy podać warunki i tym również będzie nasz unikatowy product.
OK, zobaczmy czy to wszystko działa.
Przejdźmy do przeglądarki. Wygląda na to, że działa.
Mamy tutaj już różne różne elementy wyświetlane.
Możemy tutaj troszeczkę to sobie zwinąć
i wygląda na to, że nasze query działa również.
Jeżeli to będziemy Apollo to mamy
informację, że mamy w katalogu właśnie tutaj już.
Te elementy mogą odświeżyć stronę i podglądnąć opory.
Mamy tutaj właśnie jedno query.
Mamy kesza.
OK i teraz działa to fajnie.
I teraz moglibyśmy zrobić ten jeszcze
jeden krok, czyli spróbować zrobić z tego reverse.
I jeżeli teraz przejdziemy sobie
właśnie do tej opcji river link to możemy tutaj również dostać rivera.
Żeby spowodować taki błąd serwera, będziemy mogli go po prostu wyłączyć.
Więc może tutaj dodajmy na razie tego.
I teraz w momencie kiedy tutaj będzie
ktoś klikał na retreat, ja bym chciał dodać tutaj onClick.
Okej, to będzie po prostu ten.
Może po prostu tak go przekręciła?
Dobra, czyli jeżeli klikam, to robię rewanż.
Dobra, więc przejdźmy może do konsoli
i teraz spróbujmy sobie wyłączyć serwer, czyli kontrolce.
Ja wyłączyłem już ten serwer i teraz
możemy przejść do naszej aplikacji i spróbować odświeżyć stronę.
Dobra, dostaliśmy błąd, że nie możemy się połączyć.
Zobaczmy na Networking Network Failed.
Dobra, spróbujmy jeszcze raz.
I coś tutaj się dzieje, więc zobaczmy co jest nie tak z tym referatem.
Okej, tutaj co jest nie tak z.
OK, dobra.
Więc to musi być zrobione w taki sposób, czyli funkcję, która wykonuje w niwecz.
Dobra, tutaj jeszcze błąd.
OK, teraz powinno być już w porządku.
Zobaczmy czy będzie odśwież stronę,
kasujemy wszystko na default, robimy refresh i dalej jest white,
dalej white nadal brak, więc odpalimy może serwer, zobaczymy czy nam to coś pomoże.
OK, odpalamy serwer, poczekajmy aż się
serwer odpali, żeby zrobić jeszcze raz ten revenge.
Nabrała i teraz i działa.
A więc mamy już również tą politykę trasowania zrobioną.
Kiedy będzie error? No więc fajnie.
Wygląda na to, że nam to fajnie działa, więc myślę, że tutaj możemy to skończyć i
przejdziemy do następnej lekcji, gdzie zajmiemy się agitacją.