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 zajmiemy się oddawaniem książki.
Czyli jesteśmy na stronie Bóg i to co mamy to formularz gdzie podajemy
tytuł oraz możemy połączyć tę książkę z autorami czyli mamy tutaj pole autorów i
możemy wpisać tych autorów ID jest po przecinku czyli tak jak nam
Chris Holder mówi i przejdźmy do kodu jesteśmy w pliku Book at the years.
I to co mamy to tak naprawdę ten nowy formularz jest to formularz zbudowany za
pomocą Bud trap i mamy tutaj dwa pola Book tytuł które ma Control IT Book
oraz autor said jest który ma kontrolę IT Book autorstwa id.
Dodatkowo mamy tutaj również jeszcze alert który będzie się wyświetlał wtedy kiedy
książka zostanie dodana i jest on wyświetlany warunkowo kiedy Book
at będzie trwał bo kadet jest z kolei zdefiniowany tutaj
jest to po prostu stan czyli używamy tutaj stad i kiedy książka zostanie dodana
prawidłowo to po prostu zrobimy set Book AT.
Będziemy tutaj działać na mutacje i
będziemy używać kolejnego Chucka Apollo czyli US Station.
Przejdźmy do przeglądarki
i przejdźmy do strony Apollo Klein do dokumentacji i szukajmy tutaj Station.
Będziemy tworzyć bardzo podobnie jak w przypadku Just queer czyli 104.
Jedyna różnica jest taka że stadion będzie zwracało jako rezultat tablicę.
Pierwszym elementem tablicy będzie funkcja
czyli funkcja która będzie wykonywać naszą mutację.
Drugim argumentem będzie obiekt i będziemy tam mieć stany jak data Ding czy error.
Jako argument Station będzie przyjmowało
gwary czyli dokładnie ten dokument który będziemy tworzyć za pomocą kul.
Możemy importować Graf oraz Station do naszego kodu.
Nie możemy stworzyć naszą mutację.
Więc stwórzmy
Bóg.
I znowu otwieramy.
Możemy jutrzejszym
nazwał mutacji AD Bug
i będziemy musieli dodać zmienne jak może pamiętasz z naszego ronda.
Mamy tam taką zmienną jak buk GTX czyli
musimy podać Bug Devils aby dodać nową książkę.
I jest to typu Bóg pod.
To co tutaj musimy jeszcze zrobić to wybrać pola.
Ja nie będę tutaj chciał wyświetlać dodaję książki więc po prostu
wybiorę idę dlatego że musimy wybrać jakieś pole w takim gwary czy mutacji.
Ok.
Teraz tutaj niżej będziemy chcieli zaprogramować tę funkcję handel.
Funkcja handlu jest wykonywana na osobnej formularza.
Jak na razie po prostu zapobiega domyślny akcji.
To co będziemy chcieli zrobić to zebrać
dane z tych pól czyli z pola oraz pola IT i będziemy chcieli je przygotować do
wysłania mutacji czyli do przekazania w DTS.
Więc zróbmy tutaj nową zmienną
a w zasadzie dwie zmienne i jedną będzie Bóg.
W zasadzie tak to będzie ta zmienna która jest tutaj wpisana w Control IT.
Ponieważ będziemy strukturyzowanych even target Elements czyli elementy
formularza a tymi elementami są pola o określonych idei oraz Bóg autorstwa.
I tutaj mamy już w naszej funkcji handel event więc event target element.
W taki sposób najłatwiej możemy się dostać do określonych pól w formularzu
i za pomocą tych idei możemy je łatwo zidentyfikować.
Teraz będziemy mieć te pola a więc możemy
sprawdzić czy wszystko jest w porządku możemy wykonać zalogować Bóg
Liu oraz Bóg autor IT William.
Przejdźmy do przeglądarki i zobaczmy czy jest OK.
A więc w konsoli będziemy podglądać sobie czy np.
dostaliśmy jakiś tytuł.
Jak widzisz mamy tytuł jeżeli również piszemy jakieś autorów
to również mamy tutaj drugą wartość
autorów czyli w zasadzie tych idei autorów.
Wróćmy do kodu a więc
można powiedzieć że jest gotowe.
Natomiast jeśli chodzi o autorów to będziemy chcieli tutaj
te dane aby uzyskać tablicę ponieważ jak może pamiętasz Bóg detali
wymaga od nas do kontekstu przekazania tablicy z widokami autorów.
W tym momencie mamy Stinga przecinka więc po prostu użyjemy prostej funkcji Split.
A więc stwórzmy
Ladies.
I tutaj stworzymy po prostu
idę albo raczej stworzymy raj chadeków za pomocą funkcji Split
i będziemy pilnować tego String po przecinku.
Teraz kiedy podgląd nie idę to już powinna to być bajka.
Wróćmy do przeglądarki.
Wykonujemy tutaj jakieś 2 it.
No i ok jak w dzisiejszym jest już tutaj
tablica i tą tablicę przekażemy do naszego gwary a raczej do naszej mutacji.
Więc dane mamy tutaj odrobione i przygotowane mamy dane z formularza i
teraz to co musimy zrobić to użyć naszego kółka.
Więc w tym miejscu tak jak pamiętasz tworzymy Arkę.
Pierwszym elementem będzie AD Bug
czyli to co stawiamy pod rezultaty które zwraca Chuck
Apollo.
Tutaj będzie stan Landing na przykład lub ERROR my danych nie potrzebujemy
ponieważ możemy również wybrać data gdzieś te dane wyświetlić
możemy je również dodać sam link do czego zachęcam Cię aby się dodał.
Niestety po bawił się z mutacją i urozmaicić tą aplikację.
Ja tego robił nie będę ponieważ działa to analogicznie jak w QWERTY czy w
subskrypcja więc po prostu użyje AD Bug i to wszystko tutaj zrobimy juz
Station
Station. Jako argument przekażemy AD Book.
Natomiast jest jeszcze jedna rzecz którą
bym chciał zrobić a więc chciałbym aby po dodaniu książki mieć informację czy
książka została dodana czyli to bug zmienić jego stan na
przejdźmy do dokumentacji Apollo.
Przejdźmy do opcji.
Tutaj opcja podobnie jak opcje w
QWERTY posiada Kolbe on komplet i dokładnie Kolbe się podobnie.
Czyli kiedy Apollo.
Skończy dodawanie czyli mutacja się
skończy to funkcja on kompletnie się odpali
i my w tym momencie.
Zmienimy stan naszej aplikacji czyli blokadę postawimy na.
W porządku powinno to działać.
Możemy teraz przejść do aplikacji.
Widzisz nie mamy błędów w konsoli.
OK natomiast mamy jeszcze że mamy nieużywane zmienne ponieważ tak naprawdę
jeszcze nie używamy w naszej mutacji czyli to Bóg musimy użyć
na metodzie handel Sabat a więc wywołany tą funkcję Bóg.
I ta funkcja jako argument przyjmuje przez
czyli te opcje które tutaj przekazaliśmy zostaną zmarnowane z tymi które tutaj
przekażemy a tutaj będziemy chcieli przekazać wariant
i robimy to tutaj dlatego że te zmienne są dynamiczne.
Gdybyśmy awaria bez dodaje dodali tutaj to zawsze byśmy mieli ten początkowy stan
aplikacji nie jest aktualizowany i zmiennymi w tym przypadku zawsze na handel
weźmiemy aktualny stan formularza Seven target Elements i w ten sposób będziemy
zawsze przesyłać te zmienne które aktualnie są po naszej aplikacji OK.
Więc tutaj zmiennymi będzie Bóg Hills
czyli dokładnie ta zmienna którą przekazujemy.
To co będzie co będziemy chcieli przekazać
w bok DTS to na pewno tytuł i tym tytułem będzie Bóg
Walia.
Kolejną rzeczą którą będziemy chcieli zrobić to kontekst autora.
W tym celu piszemy pole autorskie czyli
dokładnie to co robiliśmy i to co nasza dokumentacja w programie mówi.
Jeżeli nie rozumiesz dlaczego autor i dlaczego teraz robimy koncert to wróć do
lekcji o mutacja albo po prostu przyjrzyj się jeszcze raz dokumentacji w gdzie
teraz wpisujemy Connect i Connect będzie przyjmował pole IT.
Czyli w zasadzie to pole które tutaj stworzyliśmy z tej tablicy.
Jedyną rzeczą jaką możemy zrobić to w zasadzie dodać prawdziwe
idee w naszym formularzu.
Więc teraz to już powinno działać.
Nie mamy żadnych błędów.
Natomiast wróćmy jeszcze do obu list.
Podejrzewamy tutaj ten Request
i zabierzcie tego autora.
Czyli tutaj autorem na przykład jest Hans Roth link i jego idei.
Nie jest tutaj pobrane.
A więc możemy je pobrać.
Więc jestem już w Book List komponent i dodam tutaj do
naszego fragmentu Common Book muszę przejść do fragmentu Common było OK.
A więc przejdźmy do fragmentu Common Book.
Wybierzmy również współautora IT. Ok.
Teraz będziemy mieli zwrócone również
media więc podgląd to idei które tutaj mamy zwracane.
Zobaczmy.
Przejdźmy do pierwszej książki do autorstwa.
No i tutaj mamy wzrost IT.
Jest takie jak It Is kopiuje
i przejdziemy do art book.
Teraz możemy dodać tutaj jakiś tytuł.
Czyli nie obok from Hans
możemy tutaj podać.
Dodajmy tą książkę Jak widzisz mamy jakiś błąd.
Zobaczmy co jest nie tak.
OK.
Tj. ok.
I pewnie to ma jak najbardziej sens
ponieważ zapewne nie daliśmy metody wróćmy do blokad.
Tak jest stworzyliśmy Bóg natychmiast nie użyliśmy tutaj metody AD Bóg a więc jest
to najbardziej błąd tu jako bóg musimy przekazać.
Teraz możemy tutaj skierować ideę. Ok.
To już jest poprawna mutacja czyli zapewne ten błąd już zauważyłeś wcześniej ja go
zauważyłem teraz a więc pozwala mi w tym pomogła.
Teraz kiedy to świeże że w zasadzie
jeszcze zanim świeże pójdę jeszcze raz po autorów weźmiemy tych dwóch.
Wrócimy tutaj.
A więc.
Weźmiemy tych dwóch autorów.
Zrobię to w ten sposób.
Teraz.
Porządku. I teraz przejdźmy do AD bo kto dajmy
linka Bóg
wpisze po przecinku tych dwóch autorów.
Czyli tych dwóch autorów powinno być
takich samych jak autorzy dla ostatniej książki.
Teraz kliknij My Book. OK.
Znowu mamy błąd
więc wróćmy może do kodu.
I mamy tutaj ID.
Ok więc pewnie będzie problem w tym że
mamy tutaj spacji w tych ID S czyli 1 ID space czyli siłą rzeczy jest niepoprawny
więc może na początku sprawdźmy czy to na pewno to konsolę loguje ID.
Dajmy jeszcze raz te same.
Tak jak widzisz jest tutaj Space a więc będziemy chcieli ją również usunąć.
A więc wróćmy do kodu to już powinno być relatywnie proste.
Myślę że może zostać usunięty po prostu
zanim zrobimy funkcję Split zrobimy funkcję Ripley.
I teraz Space zamieniły na pusty String czyli na Space Space.
W ten sposób eliminujeOK.
Zobaczmy czy teraz będzie działało.
Wróćmy do układu dodajmy Meeting Book.
Tych autorów.
Jak widzisz książka została dodana.
Możemy teraz wejść na Bug i zobaczyć czy rzeczywiście się znajduje.
Jest więc znajduje się tutaj również
tych naszych autorów których połączyli z tą książką.
Możemy wejść również w szczegóły i mamy tutaj książkę Nie ma ona na razie
żadnych komentarzy a więc jest wszystko w porządku.
I to już wszystko jeśli chodzi o mutacje oraz cały rozdział z aplikacją red.
Stworzyliśmy tutaj pełnoprawną aplikację
razem z Kowalem gdzie użyliśmy gwary mutacji czy subskrypcji.
Ja już teraz chciałbym Ci gorąco
podziękować i zaprosić cię na lekcje podsumowujące cały kurs.