Apollo Client z React.js: useMutation 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.
Zajmiemy się implementacją
zamówień, czyli wykonamy mutację, ale tutaj dla tego przycisku Order.
W zasadzie dla tego formularza będziemy
potrzebować uzupełnić Street City, Prostokąt oraz Country.
Następnie wykonamy mutację, która wykona mutację Order
z naszej dokumentacji pokładowej i wtedy zapiszemy sobie jakieś nowe zamówienia.
Będzie to dosyć powiązane z z naszymi
subskrypcja ami, które będziemy implementować w kolejnej lekcji.
Natomiast na razie po prostu będziemy sobie w konsoli podglądać czy dana mutacja
się wykonała i będziemy ufać, że zapisała się do bazy.
Generalnie jeżeli chodzi o UI, to właśnie
w następnej lekcji stworzymy sobie tutaj taki boxing,
który będzie się wyświetlał na każde nowe zamówienie dla tego danego produktu.
A więc przejdźmy do mnie.
Skoro jesteśmy tutaj w pliku index to jest dla product details
i tutaj jest również taki komponent jak Order Form i ten Order Form.
To jest dokładnie ten model, który jest
wyświetlany na stronie i on się tutaj renderuje.
On potrzebuje dostać name oraz produkt ID i ten name to będzie właśnie nasz name,
który już tutaj sobie ze struktury zabraliśmy.
Musimy jeszcze dostać się do produktu ID,
a więc w tym miejscu musimy jeszcze sobie wybrać produkt.
I tutaj sobie właśnie to produkt tej idei również przekażemy.
A więc nasz formularz dostanie właśnie takie dwa takie dane.
I tutaj te dane mamy dostępne.
Czyli możemy przejść sobie do order forma order forma.
Tutaj dwa stany jeden to jest ordery, drugi to jest error.
Możemy teraz sprawdzić jak te stany wyglądają.
A więc jeżeli jest error to mamy właśnie
taki stan i wtedy zamykamy po prostu model.
Jeżeli error nie ma, a jest zamówiony
to wtedy mamy taki stan i będziemy musieli sobie to wszystko zaimplementować.
Będziemy działać oczywiście z hukiem.
Natomiast tutaj jest error.
To w zasadzie będzie nasz error. My sobie zmienimy.
Tutaj weźmiemy sobie ten error prosto z
kółka i z order będziemy musieli sami uzupełniać.
Natomiast status forms będzie się
uzupełniał właśnie na podstawie tych dwóch zmiennych.
A więc już przejdźmy do implementacji.
Zróbmy sobie import z Apollo Client
i to co będziemy potrzebowali to stworzyć sobie taką mutację dla zamówień.
I to generalnie czego będziemy potrzebować to takiej mutacji.
To oczywiście będziemy potrzebować jakiegoś Order ID.
Za chwilę, zaraz, za chwilę Ci pokażę jak to zrobić.
Na razie zróbmy sobie tutaj tego hooka create station, a raczej create order.
Powinna się nazywać funkcja będzie tak nazywała.
I tutaj będziemy przyjmować sobie z tego drugiego argumentu.
Ten argument to API przyjmuje data error oraz routing.
My będziemy chcieli tutaj wrzucić tylko error.
I chcemy, żeby to było pod nazwą ERP.
OK i teraz tutaj użyjemy just in time i za chwilę napiszemy mutację.
Natomiast jeszcze teraz musimy usunąć tą
zmienną, ponieważ już tutaj jest ona zadeklarowana.
I Create order będziemy wołać na przy kliknięciu przycisku submit.
Natomiast w tym momencie będziemy musieli
stworzyć sobie Fundation, a w zasadzie Motion.
Stwórzmy sobie const create order motion.
I oczywiście musimy zaimportować sobie również tutaj grę.
I w tym miejscu będziemy tworzyć naszą Station Order.
I tu będziemy musieli pewne zmienne sobie dodać.
Na razie zróbmy to w taki sposób, że po prostu stworzymy sobie tutaj order.
I również mam już gotowe dokumentacje.
Natomiast nie chciałbym już tracić czasu
na to, żeby pokazywać, że w dokumentacji tak jest.
Mamy po prostu tutaj Create przyjmuje rekord i ten rekord musi mieć właśnie
Order ID i ten od Right dostaniemy właśnie sobie ze zmiennych, które zaraz stworzymy.
I również musimy tutaj dodać sobie właśnie ten nasz ship adres.
OK i ten ship adres to jest ten nasz street city itd.
Więc tutaj będziemy to właśnie musieli wypełniać, więc tutaj zostaniemy właśnie.
Street City.
Będzie do tego jeszcze prostokąt.
I będziemy jeszcze mieli do tego.
OK i teraz tutaj musimy sobie te zmienne przetworzyć.
A więc zacznijmy od The right Order right jest typu float.
Również mamy tutaj strict to będzie typ string.
To będzie również prostokąt ok.
Tylko, że to jest również string i również mamy jeszcze tutaj country,
które również będzie string, a więc cała ta mutacja jest gotowa prawie gotowa.
Tutaj jeszcze musimy sobie coś zwrócić i możemy zrobić query gdybyśmy chcieli
jakieś dane tutaj konwertować i wtedy wybrać jakieś dane na temat tego serwera.
Natomiast my nie chcemy nic tutaj zbierać, więc po prostu sobie
deklarujemy PPM, żeby coś tutaj deklarować, bo musimy to zrobić, ale
nie potrzebujemy żadnych danych do widoku, ponieważ tutaj nic nie czujemy.
Dobra, więc to mamy gotowe,
możemy to zapisać i teraz możemy tutaj przekazać do tej funkcji.
Ja bym chciał jeszcze tutaj dodać kolejną rzecz, ponieważ w drugim argumencie mamy
opcję i tutaj możemy przekazać wcześniej już jakieś variable.
Natomiast tak naprawdę te variable muszą być tworzone w locie, bo nie jesteśmy w
stanie wcześniej powiedzieć, więc tutaj w tych variable nie będziemy przekazywać.
Natomiast przy wywołaniu funkcji.
To Ci za chwilę pokażę.
Ale tutaj to co chciałbym użyć to funkcji
Purity, ponieważ ta funkcja będzie tutaj dostawała
dane jeżeli się wywoła, ale ja bym chciał zrobić coś innego.
Mamy tutaj ten nasz Isolde Res, który zwraca ten stan, że coś się zamówiło.
Ja bym chciał, żeby ten Isolde był stworzony do pomocy
już State i tutaj właśnie ten start to będzie false, to jest pierwszy state.
Natomiast tutaj będziemy mogli sobie
również to zastopować i set is orders wykonamy sobie właśnie w tym miejscu.
A więc w tym miejscu powiem, że.
Mówiliśmy. Czyli jeżeli ten okup limited się wykona,
to zamówiliśmy już produkt, ponieważ to się wykonuje, kiedy jest trup.
No dobra, wygląda to w porządku.
Możemy teraz sobie użyć tej postaci zaimportowany.
Zróbmy to tutaj import ustalić jak.
OK i teraz już jest w porządku.
Teraz będziemy chcieli ten kreator dir wykonać sobie właśnie na tym.
Kondensat bity to będziemy dostawać jakieś wartości właśnie w tych variable.
W tym miejscu będziemy chcieli je dorzucić.
Natomiast na razie wróćmy do strony,
ponieważ chciałbym żebyśmy mieli czy jest w porządku.
Dobre. I teraz tak.
Wykonujemy order, wykonujemy submit i mamy sampling.
Tu jeszcze mamy jeden błąd, natomiast to jest błąd deweloperski.
Natomiast generalnie my tutaj
mamy informację, że nie dodaliśmy żadnych, żadnych zmiennych.
Więc to właśnie musimy zrobić.
Jeszcze jak zerkniesz, to właśnie mamy
również te values i z tych będziemy chcieli sobie wziąć nasze
zainteresowanie okolicę event i będziemy chcieli sobie zabrać te values.
Więc wróćmy do kodu.
I tutaj chcemy zmienić jedną rzecz, ponieważ mamy właśnie tutaj submit.
I teraz mamy tutaj również ten plik.
To jest zupełnie niepotrzebny, ponieważ my chcemy tutaj mieć.
Czyli tutaj był problem z markami.
Możemy po prostu wykonać cały ten segment
i wtedy ta funkcja będzie się wykonywała z tego finish, a wtedy dostaniemy jako
argument właśnie te nasze wartości i te wartości.
To będą nasze również zmienne.
Więc okej, teraz będziemy chcieli tutaj
właśnie sobie z tych values wybrać te nasze wartości.
I te values pochodzą z nazwy.
Czyli jeżeli tutaj mamy name country name
prostokąt city to dokładnie również tak trafią te wartości do nas, do naszych.
Tutaj do naszego argumentu.
Więc tutaj wykonałem sobie variable
i teraz tutaj bym chciał zrobić tak, żeby w zasadzie struktury zadać.
Chociaż może zróbmy inaczej zróbmy to tak, że praktycznie to przypiszemy
i wtedy zrobimy Wall Street, a tutaj będzie prostokąt.
Ponieważ zastanawiam się czy mamy tutaj szanse, że tych warunków nie będzie ok.
Więc może inaczej jeszcze mam na to pomysł.
Zróbmy tak jeżeli nie ma napisów.
To nie rób po prostu nic.
Ale jeżeli są, to wtedy będę chciał je restrukturyzować.
Czyli tutaj będzie tylko street.
Będzie również country tutaj na formularzu Street City City.
To tutaj będziemy mieć City.
Polowa jest.
I teraz będziemy chcieli to wszystko tutaj przepisać z naszych wariatów.
A więc zróbmy to w taki sposób.
Country oraz setting.
Dobra, super.
Teraz spróbujmy wrócić tutaj. Tutaj.
Tutaj mamy odśwież stronę.
To jest jeden z problemów, który zaraz naprawimy.
Natomiast teraz jeżeli kliknę teraz OK, to nic się nie dzieje, ponieważ muszę tutaj
wypełnić wszystko, więc wpiszmy sobie tutaj go.
I niech będzie Polska.
Teraz jak kliknę OK mamy dalej. 4.
Zobaczmy jakie mamy teraz problemy, ponieważ wydaje mi się, że podaliśmy.
Tutaj te zmienne.
Ale variable site jest ok.
Zerknijmy co tutaj się dzieje.
I tutaj faktycznie ok.
Czyli po prostu nie dodaliśmy tutaj tego CETI, więc ma to jak najbardziej sens.
O tym zapomnieliśmy.
Spróbujmy jeszcze raz.
OK, w zasadzie jeszcze zanim wrócimy do tego pierwszego problemu.
To jest problem, ponieważ teraz nie jesteśmy w stanie się wrócić do
formularza i to co ja proponuję zrobić to tutaj.
Kiedy.
Klikniemy sobie cancel.
To nie chciałbym tylko wykonać tego
callback close żeby zamknąć tylko również chciałbym.
Chciałbym również tutaj sety Solitaire ustawić na false.
OK, w takim razie może również zrobimy
sobie swój error aby można było go nadpisać, czyli error set error.
Jest to więc po prostu tutaj jeżeli mamy on error, czyli użyjemy właśnie tej
funkcji o której mówiłem i tutaj będzie error.
To właśnie w tym miejscu zrobimy set user na zasadzie nie będę chciał tutaj tego
edytora wypisywać, ponieważ go nigdzie nie wyświetlam.
Chcę tak ustawić status, że coś jest nie
tak i wtedy bym chciał tutaj również sety server ustawić na polski.
Dobra ma to sens.
Zobaczmy.
Teraz mogę zrobić zamówienie jeszcze raz od nowa.
Kraków.
I niech to będzie Polska. Mit.
Zasięg rąk ok.
Rąk mamy tutaj, ale już z grafiką ERA, więc mamy tutaj problem, że mamy dupy
gadki i to jest teraz to czego się spodziewałem.
Natomiast jeszcze przetestujemy takie tutaj.
Teraz wszystko działa, czyli jeżeli zamknę i wrócę to już mamy promocję.
Natomiast co do tego błędu tutaj problemem
jest to, że my nie podajemy jeszcze tutaj w ogóle Order ID i ten Mordor ustawia się
jako no mamy już jakieś androidy, które są w bazie.
Natomiast generalnie my tutaj chcemy ten
ID w jakiś sposób wygenerować i możemy go dodać tutaj jako taki
stały ID, a możemy również stworzyć zaimportować pewną funkcję, którą ja tutaj
zrobiłem w katalogu i wtedy stworzyłem Generate Random id.
Nie polecam tego sposobu, lepiej używać jakiegoś ID.
Natomiast nasze API to API wymaga FROM jako ID, więc nie jesteśmy w
stanie tutaj użyć ID, więc tutaj używamy po prostu takiego
Dooma przenoszonego zmiksowane go do zera, żeby nie było tam zmiennych losowych i
personalnego, więc szansa jest jakaś, że się powtórzy.
Dlatego nie polecam tego rozwiązania.
Natomiast jeżeli chodzi o ten kurs to jak najbardziej to wystarczy.
OK, więc importujemy sobie tą funkcję, przejdźmy do Order Form i tutaj zróbmy
import generatora do MID i teraz tak to jest teraz do góry i jeszcze raz do góry.
I jesteśmy jeszcze raz do góry.
I tutaj będzie JS i generatorem Domain.
Dobra, i teraz tutaj w tym miejscu.
Ja bym chciał tutaj właśnie zrobić sobie
Order ID i wygenerować sobie takie randomowe ID.
Jeszcze tylko się upewnię czy da radę z dużej dużej.
Dobra, wygląda to w porządku.
Możemy teraz sprawdzić, czy nam to zadziała.
Więc odśwież stronę.
Kliknij na order.
Jeszcze raz Kraków czy 1, 3 czy 3 i Polska.
No i ok. No i fajnie.
Graty.
Czyli wszystko poszło zgodnie z planem.
Teraz byliśmy w stanie zamówić sobie taki.
Taki właśnie.
Produkt.
I tutaj mamy właśnie ten Order ID, który jest 15 78.
Mamy tu wszystkie nasze dane, które poszły i ten order się nam dodał do bazy.
Teraz jeżeli klikniemy Back to jeszcze raz wejdziemy w order.
Możemy jeszcze raz go zamówić już na inne dane lub na te same.
Nie ma to znaczenia, ponieważ order tworzy się.
A więc tak działają mutacje.
Udało nam się tą mutację tutaj stworzyć.
Myślę, że mamy dosyć fajne staty, również obsłużone jeśli chodzi o tą mutację.
Dowiedzieli się czym jest error.
Więc myślę, że jeżeli chodzi o mutację to tyle.
Ważne jest, że wiesz, że jest to korelację z Karolem.
Wiesz, że możemy tutaj właśnie w taki sposób te mutacje wywoływać.
Variable w tym miejscu czyli.
Na podstawie formularza, więc myślę, że ok.
To tyle jeżeli chodzi o mutację.
Jest to naprawdę proste.
Przejdźmy teraz do subskrypcji.