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 +
W tej lekcji pokażę ci jak używać gwary
razem z Apollo klient w aplikacji rakietowej
znajdujemy się w tym momencie w Bóg List komponent.
Jest to komponent odpowiedzialny za
wyświetlanie listy książek na stronie głównej naszej aplikacji.
Jeżeli sobie przejdziemy na stronę główną aplikacji bo jest to
dokładnie ten komponent który wyświetla te trzy boksy będziemy chcieli pobrać
nasze książki z naszego serwera gra w kultowego i je wyświetlić.
W tym wszystkim pomoże nam oczywiście biblioteka Apollo klient
żeby to zrobić będziemy musieli używać łuków.
Będziemy chcieli odmienić te dane które
jak widzisz są teraz nowymi danymi jest to po prostu tablica
z obiektami wpisaną na sztywno i będziemy chcieli za pomocą Chucka Apollo
pobrać dane z serwera i wyświetlić je na stronie.
Aby to zrobić przejdźmy do dokumentacji Apollo klienta
i szukajmy takiego Chucka jakiego serwery.
Apollo klient w kliencie wersji dla r ACTA komplementuje wiele ciekawych chłopców
natomiast jest ważna rzecz musisz wiedzieć na czym polegają usługi w Rijadzie.
Jeżeli tego nie wiesz Mógłbym Cię odesłać
do jednego warsztatu który również znajduje się na Pl.
Gdzie omówione są dokładnie Huti oraz jak one działają w Rijadzie.
My będziemy używać Chucka juz QWERTY do tego aby użyć gwary jak sama nazwa
wskazuje oraz pobrać konkretne dane będziemy pobierać listę książek.
Jak widzisz na tym przykładzie w naszej
dokumentacji po prostu piszemy gwary tak jak robimy to na co dzień.
Musimy jedynie opanować to gwary w grafiku.
Tak więc zróbmy to.
Przede wszystkim musimy pobrać a raczej za importować sobie
naszą funkcję z gwary czyli Chucka oraz funkcję grafiku tak do stworzenia
odpowiedniego dokumentu celowego który przekażemy do Chucka.
A więc wróćmy do kodu importuje te dwie rzeczy biblioteki Apollo klient.
I będziemy tego używać.
A więc
stwórzmy koncert i będzie zwracało nam kilka rzeczy.
Przede wszystkim będą to dane czyli data
obok danych zwróci nam stan czy dane są aktualnie ładowane czy nie.
I na tym stanie oprzeć się stan
naszej aplikacji czy wyświetlić lider czy nie oraz zwróci nam również r.
te wszystkie opcje możesz sobie zbadać w dokumentacji Apollo jeżeli znajdziesz
niżej to tutaj te opcje są pokazane co zwraca ale nasz huk czyli jest data
Landing error i z reguły właśnie te trzy opcje.
Te trzy zmienne się stosuje czyli
dokładnie trzymamy dane czy są ładowane i czy jest błąd.
Natomiast jest tutaj jeszcze kilka innych
rzeczy którym możesz się oczywiście przyjrzeć.
Wróćmy do kodu
a więc tutaj musimy stworzyć sobie QWERTY a więc chcemy stworzyć dokładnie to co
robiliśmy w planetarium gdzie takie jak widziałeś na przykładzie musimy
ułożyć sobie do tego grafu Stwórzmy więc nową zmienną i nazwijmy ją Bóg gwary.
Otworzymy gra tak
jeżeli nie jesteś znajomym z tym przepisem do funkcji to działa to dokładnie tak samo
jak byśmy zrobili proste wywołanie funkcji ze stringi.
W ten sposób jest to po prostu szybsze.
I tutaj w tym naszym
kręgu będziemy pisać całe gwary a więc stwórzmy gwary nazwijmy to gwary Bóg.
Albo Bóg.
I tutaj będziemy używać metody GET Bucks z naszego gra w Cool
Get Bucks
i musimy użyć dokładnie tych pól które oferuje nasz gra faul.
Powiedzmy że chcemy żeby to był tytuł czyli to czego potrzebujemy na stronie
wejdziemy na naszą stronę Zobaczmy czego potrzebujemy.
Jest to tytuł oraz autor ok.
oraz zapewne ideę abyśmy się mogli inspirować.
Czyli dokładnie to co mamy tutaj w tych marcowych danych a więc bierzemy hit.
Tytuł oraz autor.
Tu będzie pole autorskie ponieważ tak pole nazywa.
I tutaj bierzemy forsę
oraz las czyli dokładnie to co robiliśmy w
rządzie a więc nasze kury wygląda w ten sposób.
I teraz towary przekażemy tutaj do naszego Chucka.
Możemy zrobić tutaj szybko konsol loga i zobaczyć co zwrócą nasze dane
i czy wszystko jest OK.
Możemy odpalić również konsolę
cieszmy
się wykonał wszystko jest OK.
Status 200 a więc tutaj powinniśmy dostać dane.
Jak widzisz mamy Gearbox tutaj na początku dostaliśmy kilka
razy Andy Fine dlatego że nasze dane przez pewien czas nie były
pobrane a więc będziemy musieli po prostu ten stan ładowania
zaimplementowane aby dostawać tylko i wyłącznie te książki.
Jak będziesz tutaj fajnie wszystko to wygląda mamy IT to są dokładnie te książki
które widzieliśmy gdzie również mamy listę z autorami.
Więc wróćmy do kodu
i tutaj mamy te dane więc zaimplementowane stan ładowania a więc dodajmy
może i
Ding
w zasadzie tego nie zauważymy dlatego że działamy na lokalnym serwerze.
Ale dodamy jeżeli nam się dane ładują to po prostu wręcz kierujemy tekst lobbing.
Jeżeli jest jakiś błąd z kolei.
Sam
ang. .
A jeżeli nie to jemy nasz komponent natomiast nasz komponent tutaj
będzie musiał się odwołać do tych danych bo jak na razie widzisz to działa na
nowej liście.
Możemy to usunąć i tutaj do kart po prostu piszemy.
Data Get Bucks.
Ponieważ tak to wygląda tak jak ci mówiłem nie jest to zbyt wygodne.
Chciałbym żeby to było Bucks czyli w
naszym QWERTY muszę użyć alias a więc dla Get Bucks Bucks
i teraz będziemy pod data Bucks posiadać naszą listę książek.
I to będzie również w naszych kartach.
Teraz jeżeli otworzymy stronę
to mamy już nasze tytuły ale nie wyświetla się autor.
To dlatego że gdy sprawdzimy co przychodzi nam w tych danych.
Siłą rzeczy jest to pole autorce a nie autor i autor siada.
Lista autorów. My chcemy tych autorów tutaj wyświetlać po
przecinku a więc zrobimy po prostu prostą redukcję danych.
Wróćmy do kodu.
I w tym miejscu zredukuje te dane.
Więc na początku wykonamy funkcję ma na polu Box a więc wykonanie map
przyjmie to bug.
I tutaj stwórzmy sobie czy zmienne.
Czyli będzie to nasz tytuł
rozumiem po prostu ten obiekt idei oraz autorski.
To co zwrócimy w tej funkcji to będzie
również obiekt i na pewno zwrócimy tutaj tytuł oraz idei.
I oczywiście jeszcze obok tych dwóch rzeczy zwrócimy pola.
Autor na razie może to być nudne.
Za chwilę to zastąpiły.
Teraz stworzymy sobie tutaj autor
i w tym momencie zredukuje tą listę autorów która nam przyszła z grupy KUL.
Czyli w tym miejscu.
Czyli tą listę będziemy chcieli zredukować
i stworzyć autorów czyli jeden Stream po przecinku.
Wykorzystamy do tego funkcję KRRiT
a więc użyjemy tej funkcji radiowóz a więc na polu autorstwa.
Mauritius
teraz przyjmujemy dwa argumenty czyli akumulator oraz autor
oraz nasze agregaty.
Będzie po prostu String ponieważ będziemy tutaj ten String zwiększać
o ilość autorów aby dodawać autorów po przecinku czyli to będzie wyjściowe
autor 1 przecinek autor 2 przecinek autor 3 na przykład.
Czyli takie będzie wyjście a więc zaczynamy od pustego string.
I stwórzmy cos a raczej LED.
Autor.
Temple stream
będzie autor
oraz autor.
Wlasnego
porządku teraz jeżeli
akumulator ma jakąś długość to będziemy chcieli dopisać również przecinek.
Czyli nasz akumulator to ten strajk w tym
momencie on nie ma żadnej długości więc się nie wykona czyli wykonamy tutaj s.
Jeżeli nie ma długości to do akumulatora piszemy.
Autor.
A jeżeli ma jakąś długość to piszemy.
Autor w zasadzie Kinga.
Autor
oraz przecinek
a więc tak będzie się działo.
Mam nadzieję że jest to dla Ciebie jasne.
No i oczywiście musimy na końcu zwrócić nasz akumulator.
W porządku teraz kiedy odświeżony strona
to powinno być w porządku ale nie działa.
Więc wróćmy do kodu
i tutaj nie zwracamy autora tylko pola.
Jeżeli to zmienimy to powinno być okej
tutaj jeszcze jedną rzecz jaką widzę to to że tam PRZECINEK właściwie jest w złym
miejscu ponieważ jeżeli jest jakaś długość to chcemy dodać przecinek po tym autorze
który już istnieje i wtedy dodać kolejnego.
A jeżeli nie ma to po prostu wklej autora
i teraz już powinno być wszystko w porządku.
A więc wróćmy do aplikacji i jak widzisz mamy już tutaj wiele stawianych autorów po
przecinku czyli tak jak dokładnie chcieliśmy.
Więc można powiedzieć że ten widok jest już gotowe.
Teraz możemy zająć się kolejnym widokiem czyli szczegółami dla konkretnej książki.
Jak widzisz tutaj również mamy
nowe dane a więc przejdźmy do implementacja tego widoku.