Techniki Pracy
2 godz. 14 min · Full-stack i Programowanie
Przemysław NowakSoftware EngineerW GraphQLu niemal wszystko opiera się o zapytania, a dane i ich połączenia możesz sobie wyobrazić jako połączone ze sobą grafy. W kursie zobaczysz jak czytać grafy GraphQLa w oparciu o typy danych oraz nauczysz się jak używać - Query czyli esencji GraphQLa.
Kiedy już będziesz zaznajomiony z tym jak tworzyć zapytania - nauczysz się jak tworzyć dane oraz je aktualizować. Zobaczysz, że z powodzeniem możesz używać filtrów, fragmentów i tworzyć dynamiczne mutację, tak samo jak zapytania. Wszystko to z podpowiedziami oraz wskazaniem dobrych praktyk w codziennej pracy.
Pewnie już nie raz słyszałeś o tzw. real time apps, czyli aplikacjach działających w czasie rzeczywistym, bez potrzeby pytania serwera o dane w interwałach czasowych - ponieważ serwer sam "powie" o tym, że ma dane, a co więcej Ci je przyśle. Tym dokładnie są subskrypcję w GraphQL, możesz z powodzeniem zasubskrybować się do zbioru danych, a kiedy pojawi się coś nowego, serwer wyśle ramkę z nowym contentem za pomocą kanału WebSocket. Tego jak go używać nauczysz się w tym kursie!
Apollo Client zrewolucjonizował sposób w jaki można korzystać z GraphQL w aplikacjach Front-Endowych, poprzez szereg usług dla utrzymania oraz zarządzania cachem po stronie klienta, po wsparcie dla różnych frameworków takich jak React, Angular, Vue. W Kursie nauczysz się jak w szybki i prosty sposób zintegrować serwer GraphQL z aplikacją React przy użyciu Apollo.
Jeżeli jesteś mobile lub web FrontEnd Developerem to z pewnością słyszałeś o wymaganiach dotyczących przynajmniej podstawowej wiedzy z GraphQLa. Nawet firmy, które mają stabilną architekturę opartą o REST API mają w wymaganiach GraphQL ze względu na użycie - czy to na małych mikro serwisach, czy poprzez plany migracji. Statystyki są nieubłagane - coraz więcej firm inwestuje w GraphQL ze względu na rewolucyjne podejście do pobierania danych oraz jego prostotę. Dlatego jeżeli spojrzymy na rynek pracy to możemy zobaczyć, że GraphQL staję się pewnego rodzaju "must have", którego z pewnością warto się nauczyć.
Kurs ten jest skierowany do wszystkich mobile lub web Front-End Developerów czy też osób, które chciałyby po prostu od czegoś zacząć przygodę z GraphQL. Nie potrzebujesz żadnej kompleksowej wiedzy na temat konkretnej technologii, ponieważ skupimy się nad esencją GraphQLa starając się nie mieszać go z żadnym z języków programowania.
15.3.0 +
OK więc jesteśmy w komplecie Bóg The Hills
który odpowiada za wyświetlanie szczegółów i tutaj również mamy nowe dane czyli Bóg
oraz komend i to się dokładnie wyświetla Bóg oraz komend.
I to jest lista komentarzy jak widzisz jest to tylko jeden komentarz
dobra więc to co będziemy chcieli zrobić to również zapytać o konkretną książkę
a więc stworzymy sobie tutaj znowu gwary i
musimy również tutaj importować do importuje
kurtek oraz juz gwary.
Apollo klient.
OK.
Znowu piszemy
post Data Link.
Przekażemy gwary które stworzymy
więc
jeszcze dodajmy
i lobbing.
Wtedy zwrócimy Holding.
W zasadzie to samo co robiliśmy przed nim widoku
i W.
Zwróćmy
za
rok ok w porządku natomiast jeżeli mamy
dane to będziemy chcieli te dane przekazać będziemy tutaj używać troszeczkę innej
metody czyli Get Bug Reuters ale będziemy chcieli tutaj robić Get Bucks
i pobrać je przez id.
Jeżeli wrócimy do
tego widoku to przechodząc z Book List
możemy zobaczyć że w linku mamy hit tej książki
czyli nasz link jest stworzony tak aby tutaj również było IT książki
więc to IT będziemy chcieli sobie wybrać za pomocą komputera
i za pomocą tego idę
do kamery
i pobrać konkretną książkę
aby to zrobić możemy użyć Chucka juz parametr który jest projekt autor.
Więc powiedzmy sobie raz.
Będziemy chcieli sobie.
Wybrać tę ideę i od razu restrukturyzację obiekt i będzie to po prostu IT.
Bierze się to stąd że jeżeli przejdziemy do Abbey S
to jak widzisz nasz URL w robotach jest zdefiniowany jako bóg
it.
I dokładnie to IT będzie w obiekcie
parametrem w którego używamy parametr zero jako routera.
A więc wróćmy do komponentu bo list
jeszcze tylko na chwilę abyś widział że tutaj ten link jest dokładnie w taki
sposób zaimplementowane a więc mamy big data.
I tutaj mamy kart ID czyli ID które tutaj ma powołaliśmy i zwróciliśmy.
Wróćmy do.
Teraz będziemy używać tego queer.
Musimy również stworzyć sobie
zmienną
Book gwary
i znowu otworzymy tak.
Będziemy tutaj używać metody GET Bug i musimy przekazać jej ideę.
Tutaj będziemy tworzyć oczywiście znowu zmienną.
To co robię teraz jest nieprawidłowe więc musimy stworzyć Every Get Bug i tu
będziemy tworzyć zmienną żeby przekazać ją do metody GET Bug która znajduje się w
queer a więc tutaj będziemy chcieli tej idei przekazać
OK.
Bierzmy również do tej
idei oraz może autor też autor na tej stronie się nie wyświetla.
Teraz chcecie pokazać to powtórzenie gwary
tutaj dla idei.
Będziemy przypisywać tę ideę.
Czyli dokładnie to co znajduje się w naszej dokumentacji.
Nie będziemy podawać do Idy ponieważ nie ma to sensu.
No i teraz to Bóg gwary będziemy chcieli
wykonać w tym miejscu czyli przekazujemy obok gwary.
Natomiast możesz się zastanowić skąd się tutaj weźmie.
Jak na razie mamy tu strukturyzowane obiekty parami i mamy ideę.
Z adresu URL musimy również go przekazać.
Jeżeli popatrzymy na gwary i na dokumentację.
To tutaj mamy kilka rzeczy które możemy przekazać do tego Hucka.
Pierwszą rzeczą pierwszą opcją jest QWERTY.
W zasadzie para natomiast drugim drugą opcją.
Drugim parametrem są to poprzez.
I tutaj możemy przekazać wariant Box i te
zmienne te wariant Bulls będą przekazane do naszego QWERTY czyli w to miejsce.
Ważne jest aby ta nazwa się zgadzała czyli
dokładnie tak jak działaliśmy w tej rundzie a więc dajmy tutaj obiekt poprzez.
I dodajmy w tym miejscu wariant.
OK.
I tutaj będziemy chcieli podać idę a więc po prostu wpisujemy ich
w porządku teraz kiedy wrócimy do przeglądarki wróćmy do
naszego kodu.
Jak widzisz mamy sam Ping błędu.
Zobaczmy co jest nie tak.
Jak widzisz na towary flirt autor On Bóg to jest również fajna lekcja dla Ciebie
abyś wiedział że w momencie kiedy piszemy jakieś pole które nie istnieje na danym
typie to gra automatycznie nam zwali to pole.
Dodatkowo widzimy że mamy również dobre powtórzenie startów dla błędów.
Wróćmy do kodu
zmienimy na.
OK teraz jeżeli wrócimy już powinno być OK
widoku nic się nie zmieniło natomiast jeżeli podgląd request
to jak widać Get Bóg zwrócił nam dokładnie
tą książkę tą jedną książkę którą tutaj mamy.
Oczywiście jest to dalej Get Bug więc zmienimy sobie użyjemy tutaj ale ja
czyli dokładnie to co robiliśmy z naszym rządzie.
Możemy tutaj użyć Book.
I teraz piszemy tę książkę do
naszego Bóg.
Więc tutaj możemy po prostu żyć.
Data is the strukturyzowane Object data.
Teraz już powinno powinna się wyświetlać
odpowiednia książka i odpowiedni tytuł w aplikacji.
Ok.
Jak widzisz jest w porządku mamy Amazing Book 1.
Komentarze nadal się nie wyświetlają więc musimy jeszcze pobrać komentarze tutaj nie
braliśmy żadnych komentarzy więc musimy rozszerzyć to gwary.
I pobrać również komentarz.
Będzie to contentoraz ID.
Ponieważ musimy przekazać jako ID.
Teraz te komentarze piszemy tutaj więc komentarze
możemy również sobie struktury zadać sobie jak tu Bóg.
Powinniśmy odświeżyć. Zobaczmy co trzymamy i ok.
mamy ten komentarz który nam tutaj przyszedł razem z danymi.
W tym miejscu.
Jeszcze raz cieszmy się w tym miejscu
i jest to dokładnie ten komentarz który tutaj jest ok.
.
Super że mamy pobrane komentarze mamy pobraną całą książkę.
Natomiast to co możesz zauważyć w queer to że w zasadzie to my się powtarzamy.
Jeżeli chcemy pobrać te dane Lidii autorce.
Chciałbym żebyśmy stworzyli jakiś fragment
i wrzucili te pola które powtarzamy w tym gwary jak i
również w Book List komponent
czyli w tym gwary i ich po prostu niepowtarzalne
a więc w katalogu Cool Services możemy stworzyć nowy plik nazwijmy go Book
fragment.
Ja stosuję takie nazewnictwo natomiast oczywiście jeżeli ty preferuję inne nie ma
z tym najmniejszego problemu to co tutaj zrobimy to eksportujemy.
Obiekt Buk fragment
ja dodam po prostu klucz Buk.
Albo Komor Buk.
żeby było wiadomo że to jest część wspólna
również żeby stworzyć fragment musimy użyć grafiku.
Importuje go.
Biblioteki Apollo.
OK.
No i tak jak widzieliśmy to już w play grał gdzie tu się nic nie będzie różniło.
Po prostu tworzymy fragment nazwijmy go Command Bóg.
Będzie on pracował na typie Bóg.
Tu musimy podać te pola których używamy tych komponentów a więc skupimy te pola.
OK.
No i teraz ten fragment będziemy chcieli importować.
W tych dwóch miejscach i odmienić
kod aby był wzięty z jednego miejsca dobra co importuje
bo jest komponent
bo fragment
from.
I to będzie jeden w górę.
Gra w Call Services i teraz Bóg fragment.
Nie musimy dodawać.
Mam nadzieję że jest to poprawna nazwa pliku
bo fragment ok i teraz tutaj po prostu sobie ten fragment
weźmie jeszcze raz plik bruk fragment Common Bug to będzie ta nazwa fragmentu.
Głosujmy te dane
i spróbujmy. Komor Bóg
na razie nasz dokument Graf celowy czyli tutaj ten dokument który tworzy graf tak
nie wie nic o fragmencie Common Book ponieważ nie jest on zarejestrowany.
Aby to zrobić musimy tutaj
w prosty sposób po prostu dodać ten fragment bo fragment Common Book
Common Book.
Czyli ten fragment z tego obiektu
w tym momencie zarejestrowali się w naszym grafiku.
Również ten fragment. Teraz nasze gwary będzie wiedziało że musi
tutaj sprzedawać dane które mamy pod kluczem Komor Book
w porządku zobaczymy czy to działa.
Jak widzisz mamy jakiś błąd mieliśmy do book fragment.
OK. Tutaj mamy śmietnik.
Nie powinno go być ponieważ jak widzisz jest to zwykły obiekt.
Dobra wróćmy wróćmy na Bug jest OK.
Jak widzisz wszystko działa nie mamy
żadnych błędów a więc autorzy się pobrali pobrała nam się
książka teraz musimy również jeszcze użyć tego fragmentu w naszych szczegółach.
Więc wróćmy do szczegółów
Usuń ten kod.
Tutaj również będzie Common Bug
i zarejestruje jeszcze nasz fragment czyli może po prostu kopiuje
tego importera i również kopiuje ten fragment kodu.
W porządku teraz również zarejestrowali ten fragment dla big data
a więc cieszmy stronę przejdźmy na szczegóły.
I jak książka się pobrała wszystko jest w porządku.
Komentarz również jest a więc wszystko działa.
Mamy teraz czysty kod przy użyciu
fragmentów w jednym miejscu możemy zmieniać te pola.
Czyli to o czym ci mówiłem.
Kiedy na First Time będziemy chcieli w jakiś wszystkich komponentów malować.
Do takiego aliansu będziemy mogli to z powodzeniem robić.
I będzie to koszt szacowany w tej lekcji to już wszystko.
Ja mam dla ciebie jeszcze jeden Challenge.
Jeżeli pamiętasz grudzień prezentowaliśmy agitację
chciałbym żebyś również zrobił to Ty teraz na przykładzie tej aplikacji.
Jedyną wskazówką jaką ci dam.
To to że musisz to zrobić oczywiście Bóg List komponent czyli w tym miejscu gdzie
pobiera sobie dane czyli listę książek musisz dodać zmienne
tak jak robiliśmy to dla detalu musisz
dodać zmienne i je tutaj zaimplementowane w GET Bug oraz w GET Books.
Dodatkowo jeszcze będziesz musiał zrobić jedną rzecz czyli po kliknięciu jakiegoś
przycisku który tutaj dodać będziesz musiał zresetować te dane.
Z nowymi zmiennymi a więc te zmienne będą musiały się zmieniać.
Wskazówką jaką jeszcze mogę ci dać
to co może zobaczyć dokumentację Apollo to jest taka metoda jak krew.
Kiedy znajdziemy niżej Doris alt
to się tutaj również refleks i refleks przyjmuję jako argument zmienne.
Jest to oczywiście funkcja a więc w kodzie
będziesz musiał tutaj sobie pobrać tę funkcję refleks
i w momencie klikania na przycisk będziesz musiał ją wywołać z nowymi zmiennymi które
przekaże je jako obiekt o przez czyli zrobić to mniej więcej w taki sposób.
Ja myślę że odpowiedziałem Ci wystarczająco.
życzę ci powodzenia w tym Challenge
oraz zapraszam Cie do kolejnej lekcji gdzie poruszy subskrypcję.