Apollo Client z React.js: Mutacje - Cache
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 sekcji, gdzie zajmiemy się mutacjami.
Mutacje to nic innego jak funkcje, które
modyfikują dane, czyli innymi słowy również je mutują.
Dlatego właśnie taką noszą nazwę.
Natomiast działają bardzo podobnie jak query.
Również opierają się na huku.
Jest motion i aktualnie właśnie znajdujemy się na stronie Apollo
T1, czyli w dokumentacji jest tutaj opisane jak w podstawie używać mutacji.
My sobie stworzymy własną mutację na tej stronie, na której
już działaliśmy, ponieważ chciałbym Ci pokazać jak działają mutacje razem.
Natomiast jeżeli zerkniesz sobie na tą
dokumentację to tutaj jest kilka przykładów.
To są podstawowe przykłady, które za
chwilę przerobimy niezgodnie z dokumentacją właśnie w naszej aplikacji.
Natomiast jest tutaj jeden przykład
odnośnie edytowania keszy innych w innych entity, czyli w innych typach.
Możesz sobie wyobrazić, że na przykład
wpisując produkt chciałbyś również nadpisać jakiś inny element, który np.
ma być może Product Hunt i wtedy chciałbyś również ten element
nadpisać i zwiększyć ten o 1, ponieważ ktoś np.
kupił ten produkt.
Wówczas możesz właśnie przejść do tej sekcji Update Station.
I tutaj jest właśnie taki przykład jak to zrobić.
W zasadzie to nie jest ta sekcja, ale to jest ta sekcja making of the Abyss.
Ta sekcja mówi właśnie o tym, że
nasza mutacja również ma taką funkcję jak update, która dostaje właśnie tej funkcji.
Chcesz Modify na konkretnym polu?
Możemy go zmodyfikować i właśnie w taki
sposób możemy to sobie zrobić, czyli modyfikujemy go i zwracamy nową wartość.
Gdyby właśnie była taka sytuacja, żebyśmy chcieli to
zrobić nie za pomocą jakiejś funkcji merge itd.
Ponieważ nie mamy takiej możliwości, to
możemy to zrobić za pomocą tej funkcji update
i tutaj po prostu zwracamy na to wynik, który ma być dla tego konkretnego pola.
Więc jest to dosyć ciekawa funkcjonalność, nie używam jej zbyt często.
Natomiast gdybyś potrzebował użyć właśnie
w taki sposób taki case, to również jest to w dokumentacji.
Do tego chciałem Ci to pokazać.
My natomiast skupimy się na tym kółku use
motion i na tym, czego się używa w codziennej pracy.
A więc przejdźmy sobie do aplikacji.
W zasadzie chciałem tylko napomnieć, że
działa bardzo podobnie jak hub jest query, po prostu go wywołujemy.
Jako pierwszy argument dostajemy funkcję,
którą musimy wykonać, czyli na przykład na onClick.
Tak jak poprzednio, dwa kolejne argumenty
to są właśnie data oraz loading oraz error, czyli
to samo co mamy w sklepie, więc nie musimy się tutaj w ogóle niczym przejmować.
I tutaj mamy również właśnie tą informację, że rezultatem jest funkcja
mute oraz właśnie te wszystkie tutaj elementy.
Więc przejdźmy sobie do aplikacji.
To co Ci chciałem pokazać to jest właśnie crash.
Jeżeli sobie tutaj zerkniemy, to właśnie możemy zobaczyć te produkty.
I my byśmy chcieli mieć taką sytuację.
I w zasadzie tak działa Motion Apollo, że kiedy dajemy sobie ten
produkt o konkretnym ID, to wtedy również tutaj dostajemy taką
informację, że ten produkt to taki mit został datowany.
Co ciekawe,
my nie mamy akurat takiego okresu w tej aplikacji, ponieważ ja tutaj dodałem
formularz do zamawiania produktu i możemy tutaj wysłać sobie
wpisać informacje gdzie ma być dostarczony produkt i kliknąć submit.
Natomiast chciałbym, żebyśmy tutaj jeszcze przynajmniej na chwilkę dodali sobie taki
przycisk na danym produkcie, datę z jakimiś zdefiniowanymi wartościami w
kodzie, aby Ci pokazać jak jak jesteśmy w stanie sobie zadawać też w Apollo klient.
Więc przejdźmy do wie skąd i jesteśmy właśnie na tej stronie.
Index Products Page index to jest i będę chciał tutaj w tym miejscu gdzieś może.
Może dla konkretnego itemu pod produktem.
Chciałbym dodać tutaj przycisk, który będzie po prostu patronem.
I ten baton będzie miał przycisk order i na onclick będzie wykonywał mutacje.
Czyli tak w zasadzie musimy to zrobić, tak i tutaj będzie przyjmował właśnie.
Produkt taki na pewno.
Do pierwszego z nich przyjmiemy protected
oraz jeszcze chciałbym przyjąć tutaj właśnie name into name.
To będzie już jakieś nasze name, które sobie tutaj wpiszemy.
Więc niech to będzie New name.
I również musimy tutaj uzyskać id id nie samego produktu, a ID elementu w bazie.
I takie właśnie takie właśnie ID możemy znaleźć w dokumentacji naszego konta.
Tutaj widzę, że mamy jeszcze jakieś problemy z formatowaniem.
Za chwilkę może sobie skopiuję tą funkcję.
I spróbujemy to naprawić.
OK, to jest tak dobre, że zróbmy to po prostu w ten sposób.
Dobra.
Prawie, bo.
On mówi po prostu, że tutaj funkcja nie istnieje.
Na razie natomiast to powinno być już
w porządku, za chwilkę taką funkcję sobie stworzymy.
A więc musimy właśnie ten ID podać, żeby żeby być w stanie nadpisać
identyfikować ten element w bazie danych MongoDB.
A więc to jest tak naprawdę MongoDB.
ID.
I właśnie tutaj sobie je podamy, ale żeby je mieć, musimy również sobie je.
W tym miejscu.
Pobrać.
OK i teraz możemy już sobie zdefiniować nasz kod naszej mutacji.
A więc przejdźmy sobie tutaj do góry strony i pod Just Query stwórzmy sobie.
I tutaj jako pierwszy argument będziemy.
Oczywiście pierwszy argument to nasza funkcja nie tak.
I drugimi argumentami mogą być data oraz loading.
My tutaj tego tak naprawdę nie potrzebujemy.
Chcemy po prostu wykonać funkcję mute i tutaj musimy przekazać tą mutację.
Więc stwórzmy sobie tutaj konstelację T1.
Nie chciałbym tutaj zbyt dużo czasu spędzać na
nazwał tych zmiennych, ponieważ za chwilę i tak usuniemy ten kod.
Jest to tylko taki testowy kod, aby pokazać Ci jak to się obejmuje flashu.
Więc stworzymy sobie T1
i tutaj zrobimy sobie T1 i tutaj będziemy chcieli stworzyć sobie
update projekt i musimy tutaj właśnie przekazać sobie ID produktu.
Więc stwórzmy sobie ID i to będzie string.
Prawdopodobnie
również będziemy chcieli tutaj sobie przekazać protected i to będzie void
oraz jeszcze będziemy chcieli przekazać sobie name i to również będzie string.
I teraz tej mutacji będziemy chcieli
zawołać sobie update product, które nam przekażemy wszystkie te dane.
Natomiast on dostaje te dane w polu record i rekord musimy sobie ID.
Również musiałem przekazać taty oraz.
I również musimy przekazać tutaj mamę, ponieważ byśmy chcieli mamę skompletować.
No i tutaj nie mamy w tym w tej mutacji
niczego, co możemy zwrócić, natomiast możemy sobie zawsze zwrócić uwagę.
Dlatego że zawsze musimy
coś klarować w mutacjach również i to jest cała nasza mutacja.
Skupujemy to sobie, przejdźmy tutaj i jako pierwsze argumenty tego użyjemy.
Nie mamy zdefiniowanego, więc przejdźmy
sobie w to miejsce i importujemy to co klient.
Dobra, zapiszmy i przejdźmy teraz Tutaj klikniemy order.
Okay, widzę, że jest jakiś problem.
Jaki mamy Error variable id of type string.
OK. Czyli musi to być jednak ID.
Dobra, więc to jest Twój typ.
W porządku, zróbmy to w taki sposób.
Wrócimy na stronę.
OK, widzę, że tutaj ciągle jest jakiś problem.
Dobra. Widocznie mamy problem z tym, right?
Nie chciałem się teraz w tym skupiać, ponieważ to w ogóle nie będzie potrzebne,
więc może po prostu dodamy tutaj mam jakieś ID z bazy produktu.
I go po prostu tutaj wkleję.
W tym miejscu nie będzie on nam potrzebny,
więc tak to zostawimy i w ten sposób będziemy mogli wykonać mutację.
A więc wróćmy teraz na stronę.
Odśwież stronę, wyczyszczę jeszcze konsole.
Jak mutacja się wykonała.
Zaprojektowaliśmy produkt i zobaczmy jak wygląda kieszeń.
OK, przejdźmy tutaj do.
I produkty.
I to co widzisz, to automatycznie się gotował.
Więc teraz, kiedy pójdę już na szczegóły tutaj.
Więc tutaj widać jest datowany i się nic nie zmienia.
Tutaj również widzimy ten new name.
Przed chwilą był name, ponieważ wykonałem przed chwilą jeszcze Name Query.
Teraz jest mountain, czyli to co wykonaliśmy z aplikacji jest New Name.
Jak jeszcze raz wykonamy.
To query to również się tam datuje.
OK, i generalnie
chciałem, żebyś to zobaczył, że ten też jakby automatycznie się adaptuje.
Nie trzeba samemu tego robić.
I to jest ta fajna stronka wgl.
Więc myślę, że to tyle tytułem wstępu.
Jeżeli chodzi o mutację i w następnej
lekcji implementujemy sobie dodawanie mutacji.