Apollo Client z React.js: Paginacja
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.
Jesteśmy w miejscu, w którym skończyliśmy,
a więc zajmiemy się teraz implementacją pielegnacji.
Przejdźmy sobie na stronę tutaj otworzyłem
zakładkę Page Overview Nation Overview odnośnie tego jak Apollo
tutaj implementuje pielęgnacja, jak tutaj rekomendują, żeby to zrobić?
Jak wygląda?
Jak zrobić regenerację opartą na odsetkach
oraz jak wykorzystać do tego również i argumenty.
Ja nie będę chciał przez tą dokumentację.
Żeby to po prostu zrobić szybciej.
Możesz oczywiście sobie tutaj to doczytać.
Link również znajdziesz w źródłach do do tych sekcji.
Gdybyś np.
prezentował pielęgnację opartą na kursach, czego tutaj nie robimy,
to również jest tutaj taki tutorial i gdybyś również miał jakieś problemy w
swoim indywidualnym projekcie, to również możesz tutaj zawsze się odwołać.
Jest tutaj kilka ciekawych sekcji, więc polecam to poczytać.
Natomiast wróćmy sobie już tutaj do naszej aplikacji obiektowej i tutaj.
To co widzisz to jest dokładnie to nasza
stronka i my będziemy chcieli zaimplementować sobie ten komponent.
Ten komponent.
Jeżeli zerkniemy sobie na plik
product page to jest plik jest w katalogu product.
To tutaj mamy taki komponent jak na nation.
Ja Ci go już pokazywałem, on tutaj dostaje kasę, dostaje karę oraz total.
Również on przyjmuje tutaj taką wartość jak on change
i ta wartość wywołuje się za każdym razem, kiedy mogę ci to teraz zaprezentować.
Ta wartość wywołuje się za każdym razem,
kiedy wywołamy sobie właśnie tego męczennika w tym miejscu.
Więc jak widzisz, tutaj się wszystko
dzieje i my będziemy chcieli sobie właśnie to w taki sposób zaimplementować, czy
to w oparciu o tą funkcję, czy będziemy wywoływać zmianę stanu naszej aplikacji,
przez co będziemy przeładowywać się z Query.
A więc wróćmy jeszcze raz do kodu
i mamy tutaj query, które pobiera sobie pierwszą stronę stopy x0.
Tutaj mogą być to również Page 1 i to również będzie ta sama strona i per page.
Mamy tutaj 8 elementów.
My będziemy chcieli, żeby
najpierw pobrać sobie pełną ilość elementów, aby przekazać i obliczyć sobie
ten dopiero w naszym w SQL u mamy taką właśnie.
Mamy takie pole jak page.
Po tym naszym API i w tym naszym API jest takie pole page.
Tutaj możemy za pomocą tego page to
przeliczyć, ponieważ jeżeli teraz byśmy powiedzieli, że mamy 10 stron
przy ośmiu elementach na stronę, to znaczy, że page to się równa page,
to znaczy total to się równa page countries.
I tak to sobie obliczymy.
Natomiast musimy tą wartość gdzieś sobie zapisać poza query.
Więc ja proponuję zrobić tutaj po prostu their page i tutaj to sobie zapisać.
Jeżeli tutaj zrobimy cluster to musimy również to do naszego query przekazać.
A więc robimy sobie tutaj zmienną per page.
Powinieneś to pamiętać z pierwszej części
kursu i to musi być wartość dokładnie taka sama jak w dokumentacji
i jest to wartość Integer i my tutaj będziemy tego page używać.
Jeżeli tutaj, to znaczy, że również musimy
to przekazać w Query i API do Query jest takie,
że mamy w drugim argumencie opcję, które jako jeden z kluczy przyjmuje variable.
I tutaj dokładnie ten variable musi być taki sam jak ta nazwa, czyli PR page
i ten page wypełni nam ten variable, który trafi właśnie jako argument naszego query.
I tutaj użyjemy tego konta, które właśnie stworzyliśmy w tym miejscu.
Czyli to będzie dobra.
I drugim argumentem, który już teraz również możemy przekazać jest Page.
Na razie go nie będziemy używać.
Zrobimy, będziemy go używać dosłownie za chwilę.
Natomiast na razie chciałem ten total obliczyć.
Więc tutaj Page również to będzie Integer
i również tutaj będziemy przekazywać ten page.
W tym miejscu musimy również przekazać Page.
Na razie to będzie statycznie jeden, za chwilę będziemy sobie to zmieniać.
Więc przejdźmy sobie tutaj.
I tutaj mamy już pobrane.
Te strukturyzowane DIY temu, więc również
weźmy sobie tutaj page info i poniżej już zróbmy sobie page info.
I tutaj w zasadzie nie tutaj przeciwko, bo tutaj także
lecimy z tego obiektu Page info i teraz nasz total To tak jak mówiłem
będzie Page Rank, czyli ilość stron, którą nam zwrócił graf Cool.
Na podstawie tego ile elementów chcemy
wyświetlać na stronę i musimy sobie to pomnożyć, więc to będzie page by page.
Czyli jeżeli chcemy wyświetlać 8 elementów
i mamy 10 stron to znaczy, że będziemy mieć wszystkich elementów 80.
I na tej podstawie ten komponent się renderuje w odpowiednim stanie.
Więc możemy to zapisać, wrócić tutaj do strony.
I jak widzisz, tutaj już mamy właśnie taką informację, że mamy 8 page 8 stron.
Mamy tutaj 10 łącznie stron w zasadzie, czyli mamy 80 wyników.
No i ok, mamy tutaj już coś obliczone.
Na razie callback nam się wywołuje, ale nic innego się nie dzieje.
No bo właśnie teraz musimy to
zaimplementować, żeby pobierać te elementy z naszej machinacji.
Tutaj również Pages.
Możemy również użyć tego page, żebyśmy już nie mieli żadnych magic numbers i Parent.
To będzie nasz page, jakiś stan.
I ten stan musimy sobie tutaj stworzyć.
Więc zróbmy sobie tutaj page set page.
I tutaj zrobimy tak.
I tą naszą pierwszą stroną jest 1.
A więc to będzie nasza domyślna wartość.
Jeszcze ze importujemy sobie stats czyli ok.
I tutaj przekażemy ten bagaż
i my będziemy chcieli coś robić z tym set page na zmianie.
Więc przejdźmy sobie tutaj.
I mamy tutaj funkcję change.
Tak jak wspomniałem i ta funkcja jako jeden z parametrów przyjmuje page.
To jest jej pierwszy parametr.
Czyli teraz jeżeli sobie zrobimy console
loga tego page i wrócimy na stronę wykonamy sobie tutaj.
Gdziekolwiek.
I to widzisz, że dostajemy tutaj numer strony, na którą próbujemy się dostać.
I my dokładnie będziemy tak to robić, że ustawimy sobie ten page, czyli zrobimy
tutaj set page i jako ten set page zrobimy po prostu Page.
A więc teraz, kiedy zmieni się nasz ten stan w tym
miejscu, to również nowy page będzie w zmiennych
już Query Query wykona się jeszcze raz i pobierze nam kolejne strony.
Natomiast ja bym chciał jeszcze tutaj
sobie pobrać Karen Page, żeby dostać informację jaką mamy aktualnie stronę.
OK, skopiuj to sobie i ten Karen Page również tutaj będę chciał wyciągnąć z Page
info i również będę chciał tutaj przekazać do tego komponentu tak żebyśmy mieli
tą wartość dynamiczną, a nie zawsze ustawioną na jedynkę.
Odśwież stronę.
I teraz możemy spróbować.
No i wygląda na to, że działa.
Widzisz, jesteś w stanie się przełączać?
Ten loader tak się szybko pokazuje, dlatego mamy taki efekt usunięcia.
Natomiast fragmentacja.
Jak widzisz jesteśmy w stanie tutaj fajnie
się nawigować na wszystkie strony, ale nie jest to najlepsze
z tego względu, że przede wszystkim możesz zobaczyć tutaj ten warning.
Coś jest nie tak, dlatego, że Warning mówi nam, że możemy tracić dane z kesza.
Prawda jest taka, że tak tracimy, ponieważ zerknij sobie na network.
I teraz, jeżeli byłem już na pierwszej stronie, czyli to jest mój pierwszy stan
i wchodzę na drugą stronę w tej drugą stronę.
Jeżeli zerkniemy sobie na pilot, to mamy
tutaj Page 2 i wracając na pierwszą stronę powinienem dostać kesza.
To się nie dzieje. Tak naprawdę dostałem jeszcze raz.
Wykonałem jeszcze raz request
pod tą pierwszą stronę i za każdym razem tak to działa.
I żeby to zrozumieć przejdźmy sobie do
zakładki Apollo i mamy tutaj w naszym Cloud Query Viewer.
Nie mamy tutaj Product Nation.
Może troszeczkę to rozszerzę
i ten produkt aktualnie jest zapisany jako Page 4 i kiedy wejdę na stronę trzecią się
nadpisuje, czyli on tutaj jakby się nie marnuje.
Więc cały czas mamy nowy wynik.
Więc nie wie, że coś takiego jak wynik dla strony drugiej istnieje.
I to właśnie musimy sobie stworzyć za
pomocą funkcji merge w celu Apollo, żeby to działało.
Więc przejdźmy do klienta i tutaj będziemy
musieli stworzyć nowe tablice dla biura, a więc w zasadzie dla biura.
Natomiast musimy odwołać się do Query,
ponieważ jest to nasz ród Query to jest dokładnie to.
Ród Query odpowiada
polu query w tej polityce i tutaj będziemy chcieli dla
konkretnego pola, a w zasadzie dla pola WR.
Wykonać funkcję merge i funkcja przyjmuje dwa argumenty.
W zasadzie ona może przyjmować jeszcze
trzeci, natomiast tutaj nie będzie potrzebny.
I tym pierwszym argumentem jest pole.
To co już mamy w kasie, czyli możemy to
nazwać existing i tak również nazywają to w dokumentacji oraz ikonkami.
I domyślnie tak jak to działa, czyli nie
zmieniając implementacji merge, czyli za chwilę zobaczymy to na stronie.
Tutaj oczywiście zrób sobie funkcję szokową to zwraca nam to pole linkami.
Czyli to jest domyślne zachowanie funkcji meczu.
Teraz jeżeli wrócimy na stronę
i spróbujemy jeszcze raz się po nawigować, zerknijmy na ten cash URL.
Mamy tutaj page.
Nic się nie zmieniło, ponieważ zwraca nam to zawsze to linkami.
To co my musimy zrobić, to musimy zmarnować oba rezultaty.
Natomiast na początku ten existing to jest
undefined, więc musimy tutaj zdefiniować pole obiektu
i w razie czego gdyby linkami przyszło coś undefined, to również nie chcemy tutaj,
żeby nasza aplikacja pokazała błędy podczas mordowania obiektów.
Więc domyślne pola ustawiamy na obiekty i później to sobie budujemy
i teraz powinniśmy testować nowe rezultaty do kesza.
Więc jak?
Zerknijmy na kesza to teraz jak widzisz już tutaj dostaliśmy kolejny rezultat.
A więc w zasadzie to już działa, ponieważ nawet teraz widzisz, że my dostajemy te
wartości z kosza, ponieważ nie ma już domknięcia, nie ma tego loadera, że
ładujemy nowe dane i również zerknijmy na networking.
To tutaj widać, że żaden request się nie wykonuje.
Kiedy przejdziesz na stronę czwartą, na
której jeszcze nie byłem, to jakoś się wykona.
Czyli działa to jak najbardziej w porządku.
Ja jeszcze chciałbym tutaj jedną rzecz usprawnić.
Jeżeli zerkniemy na ten kesz, to my tutaj zapisujemy pełne obiekty.
Ja bym chciał, żeby ten produkt navigation
miały swój element w okienku, czyli chciałbym zdefiniować dla niego.
Więc my tutaj nie mamy dla jako filtra nie mamy żadnego ID,
ponieważ jest to jakby i elementy dla danej strony.
Natomiast maszynki WDM jeżeli sobie zerkniemy tutaj
mogłoby być lepiej, ponieważ zawsze Karen Page będzie indywidualny.
Czyli jeżeli powiemy Page Karen Page to
zawsze będzie to nasza unikatowa wartość dla tych itemów, które dostaniemy.
Czyli to będzie zawsze taka korelacja.
Więc przejdźmy może tutaj.
I ja bym chciał właśnie dla tego pola product paginy.
Czym.
Definiować w sobie właśnie taki filtr
i chciałbym powiedzieć, że to będzie właśnie page info.
OK, zapiszmy to.
Wrócimy tutaj i teraz.
Jeżeli zerkniemy na ten też,
no to tutaj już mamy referencję i tutaj w koszu pojawił się ten nowy klucz.
Załaduj stronę drugą wklejał nam tutaj.
Doszło oczywiście kilkanaście nowych produktów, doszedł nam nowy produkt na
dzisiejszym i tutaj również nam się tutaj ten klucz
pojawił, a więc już tutaj jesteśmy w stanie się szybko nawigować.
To co zauważyłeś to również doszedł nowy produkt w tym miejscu oraz kategorii
kategorii nie jestem do końca potrzebny, natomiast product jest, ponieważ teraz
kiedy przejdziemy na jakiś produkt w tym miejscu to działa to automatycznie.
Nie mamy tutaj żadnego query, ponieważ już
przy tym query w tym miejscu to sobie zapisaliśmy.
Natomiast może teraz zauważyłeś pewien problem.
Kiedy jestem na stronie drugiej,
przechodzę sobie do mojego produktu ze strony drugiej.
Wracam, to wracam na stronę pierwszą.
To dlatego, że jest tam stan wyjściowy dla
tej strony i żeby to naprawić musimy gdzieś zapisać sobie ten page.
I ja proponuję, żebyśmy to zrobili w Query
Query, więc moglibyśmy sobie zrobić właśnie w taki sposób, czyli np.
Page 1, 5, 2 czy 4 i wtedy kiedy będziemy tutaj wracać na te
stronę, to będziemy wracać na te konkretny, konkretny page, ponieważ Window
Location History będzie tutaj pamiętał właśnie tą historię.
A więc implementujemy to, aby mieć już taki wpływ na dzisiejszym.
Więc wróćmy do indeksu
i to co ja bym chciał zrobić to przede wszystkim użyć funkcji history history.
Pozwoli nam na wrzucenie nowego statu do history.
Czyli wejdźmy sobie tutaj zaimportowany I history.
I ta historia, jak
i tutaj będziemy chcieli robić sobie na tym miejscu challenge.
Będziemy chcieli sobie tutaj wejść, czyli możemy tutaj otworzyć funkcję w świecie.
I tutaj będziemy przede wszystkim.
Tutaj oczywiście będzie Page i będziemy robić sobie set page.
Więc to się zgadza. Tutaj nic nie zmieniamy.
Obok będziemy chcieli wykonać sobie historię push Dunaj.
Przyjmiemy obiekt i to będzie jako pierwszy.
Okaże się na własnej i tutaj prawnej.
To będzie ta sama strona, czyli tutaj wystarczy nam tylko slash.
Natomiast jako serwer będziemy chcieli
podać właśnie ten nasz page, czyli tutaj będziemy chcieli powiedzieć, że page.
Równa się, czyli po prostu żyjemy.
Tego.
I teraz jeżeli to zapiszemy, to powinno to działać w porządku.
Zobaczymy, czy tak rzeczywiście będzie.
Teraz jesteśmy na stronie drugiej.
Jesteśmy na stronie pierwszej i drugiej.
Wejdźmy tutaj jakiś produkt, wróćmy.
I poniekąd działa to w porządku.
Natomiast cały czas ten pierwszy state jest jeszcze nie obsłużony, ponieważ kiedy
wracamy na stronę, to ciągle dostajemy ten pierwszy stan.
Dlatego, że nie wczytujemy jeszcze tego,
więc mamy już zapisane to do query parametrów, ale musimy je jeszcze sobie
wczytać i żeby to zrobić będziemy mogli użyć po prostu query,
więc stwórzmy sobie tutaj dać parę, a w zasadzie może jeszcze.
Rams i tutaj będziemy chcieli sobie stworzyć URL serwera.
Czyli tutaj działamy w zasadzie na czystym
JavaScripcie i tutaj będziemy chcieli sobie użyć Window Action.
Set Rotation Server zwróci nam to co mamy w Perlu, czyli to co mamy w tym miejscu
i z tego window location, czyli w zasadzie z tego search parametr.
Z tej instancji będziemy chcieli sobie
wyciągnąć aktualną stronę, czyli page page param.
I tutaj zrobiłem sobie get.
I to będzie page.
Również chcielibyśmy to na pewno sobie spasować, ponieważ wszystko co przychodzi
składa się z string, a więc zrobimy to sobie i tutaj int i dajemy radix OK.
I teraz jako just użyjemy właśnie tego page param.
Zobaczmy czy to działa.
A więc odpuśćmy sobie stronę.
Jestem na stronie drugiej i to jest już teraz.
To też działa, ponieważ aktualnie jesteśmy
na stronie drugiej i mamy tutaj również wyniki dla drugiej strony.
Możemy to również podglądnąć w celu wywołania Page 2.
I tutaj te wyniki właśnie dla tej drugiej strony.
Teraz jeżeli przejdziemy na stronę
pierwszą mieliśmy ten request, natomiast już teraz tych requestów nie ma.
Jesteśmy na odpowiednich stronach.
Jestem teraz na stronie czwartej.
Wchodzę w konkretny produkt, wracam i wróciłem na stronę czwartą.
A więc teraz cała nasza relacja, również z nawigacją działa dobrze.
A więc dziękuję Ci za udział w tej lekcji i zapraszam Cię do kolejnej.