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 +
Lekcje dodamy subskrypcję do naszej aplikacji RIA Act.
To co widzisz na ekranie to nasza
aplikacja po lewej stronie oraz po prawej stronie mam odpalono Grant.
Ponieważ z Play grają będziemy dodawać
nowe komentarze w naszej aplikacji będziemy na kanale web
socket kiwać za pomocą subskrypcji czy coś nowego się pojawiło.
Na początku musimy jednak skonfigurować sobie kanał web socket dla Apollo klient.
Dlatego przejdźmy do Apollo klient.
Przejdźmy do sekcji subskrypcji.
Będzie to etap skryptu dla klienta.
I tutaj mamy kilka wskazówek jak tych subskrypcji używać.
Oczywiście to jest to samo czyli zasada jest taka sama jak przy QWERTY itd.
Szkoła wygląda tak samo jak ten który tworzyliśmy w rundzie
natomiast ważną rzeczą jest tutaj to że
mamy również opisaną konfigurację naszego Web Socket A oraz naszych subskrypcji
ponieważ musimy stworzyć nowy link dla Web Socket A i będziemy go dzielić.
Czyli kiedy operacja będzie po http.
Wtedy będziemy używać linku po http.
Natomiast kiedy będzie to operacja będzie tańsza dla subskrypcji
wtedy będziemy używać linku dla Web Socket A więc skupimy może ten kod
a jeszcze wcześniej zainstaluje te dwie biblioteki czyli Apollo klient który w
zasadzie już mamy oraz subskrypcję transportu web socket
skupimy to a przejdźmy do terminala.
Ja jestem już w katalogu 0:4 i po prostu wklej je tutaj te komendy.
OK.
Jak widzisz wszystko się już zainstalowano.
A więc wróćmy do Apollo klient do dokumentacji
i skupimy ten kod
w sklepie możemy skopiować całość.
Przejść do naszego jest i go w klatce.
To co tutaj mamy to definicja naszego
linku definicje linku dla Kreta oba nasze linki są pod portem 4 tysiące
natomiast jeden link działa na protokole HTTP a drugi na protokole.
Tutaj również mamy za importowane dwie funkcje Split oraz HTTP link.
Możemy ten import sklecić do jednego.
Oraz mamy jakieś psy z biblioteki Apollo.
Tutaj jest funkcja split tak zwana Split
Link która mówi czy dana operacja jest subskrypcja czy nie.
Jeżeli jest subskrypcja to użyj web socket link.
Jeżeli nie to że ich HTTP link.
Jedyne co teraz jeszcze musimy zrobić to
ten Split link dodać w naszej konfiguracji klienta czyli zamiast tutaj dodajmy link
i jako Link przekażemy z plik.
Teraz to powinno działać.
Więc mamy skonfigurować Apollo klienta dla absolwentów oraz dla zwykłych operacji.
Przejdźmy teraz do Bug Tales
a więc w katalogu 0:4.
Do tej listy
musimy dodać naszą subskrypcję
będziemy używać Chucka Just subskrypcję EMS Apollo Player za chwilę przejdziemy do
dokumentacji i pokażę ci przykłady jak jest używany.
Szukajmy tutaj juz
jest tutaj Hughes subskrypcję i to co tu widzisz to to że tak naprawdę
działa bardzo podobnie do Square czyli dostajemy tutaj również w rezultacie dane
ładowania jako pierwszy argument przekazujemy nasze gwary czy tez
subskrypcję którą tutaj również za pomocą pada musimy skonfigurować
jako drugi argument przekazujemy opcję w tym miejscu mamy przekazane zmienne my
również będziemy używać on subskrypcję data czyli Kolbe
który będzie nam mówił że coś nowego przeszła a więc my żyjemy w troszeczkę
inny sposób nie będziemy tutaj zwracać uwagi na rezultaty tylko po prostu.
Podobnie my się pod Chucka który nam będzie mówił czy dane przeszły czy nie.
A więc możemy w taki sposób już subskrypcję przejdźmy do kodu.
Dodajmy tego Chucka w tym miejscu.
I tu musimy przekazać naszą subskrypcję.
Będzie to komenda net za chwilę ją stworzymy i drugą.
Drugim parametrem będą opcje.
Będzie to wariant bus.
Będziemy musieli przekazać Book iD
jako ID możemy użyć ID.
I to w zasadzie wszystko co będzie nam potrzebne.
To jest dokładnie to czego używali.
Program gdzie czyli kiedy przejdziemy do DX i do komend.
Widzisz jaką zmienną musimy użyć Bóg IT.
Myślę że jest już Ci to bardzo dobrze znane
i drugą argumentem będzie on subskrypcję data.
Czyli jeżeli przyjdą nowe komentarze będziemy chcieli je odpisywać.
Natomiast te funkcje zaimplementowane za
chwilę chciałbym zrobić na początku coś innego
w tym miejscu mamy to daną zmienną z komentarzami i je tutaj wyświetlany.
Jak widzisz jest ona stałą a więc nie będzie ona się aktualizować.
Musimy ją dodać do startu naszej aplikacji
a raczej do tego komponentu i móc ją aktualizować w każdej chwili.
Czyli jeżeli coś nowego przyjdzie w tym miejscu oraz musimy ją zaktualizować kiedy
przyjdą początkowe komentarze czyli ten pierwszy start a więc usunie ten kod
i stwórzmy tutaj
KOD.
Komend i juz setkom
czyli będziemy używać stad.
Mam nadzieję że bardzo dobrze znasz już tatę.
Ja już go wyżej za importowane z biblioteki.
I tą początkową wartością będzie tablica a więc będzie to pusta tablica a więc
tutaj komentarze na początku będą puste i w tym miejscu kiedy juz gwary zwróci nam
dane będziemy chcieli te komentarze napisać czyli zrobić setką.
Przejdźmy do dokumentacji Apollo.
Szukajmy juz gwary.
Kiedy popatrzymy sobie tutaj na opcję gwary to jest tutaj taka opcja jak
on komplet.
Jest to Kolbe który mówi nam że dane gwary się zakończyła a więc w tym miejscu możemy
się podpiąć i możemy aktualizować nasze komentarze.
A więc wróćmy do opcji w kodzie i obok wariantu to demon on
komplet on komplet dostaje jako argument data.
I w tym miejscu dodamy setkom
set komentarze i data Box a raczej Data
Book ponieważ tak mamy tutaj zdefiniowanego asa
możemy to zrobić jeszcze troszeczkę
ładniej a więc od razu możemy strukturyzowane obiekty data
i przekazać od razu Book.
OK. Teraz nasze komentarze powinny być
aktualizowane kiedy to gwary początkowe się skończy.
A więc ten pierwszy stan będzie już gotowy
możemy przejść do aplikacji zobaczyć czy to rzeczywiście działa
jak widzisz jest tutaj problem ok. .
Komentator nie jest deficyt więc nie ma z tym problemu na razie po
prostu przekażemy tutaj Nobla a za chwilę stworzymy komentarze
a w zasadzie możemy komentować na razie kod już subskrypcję
i zobaczyć czy jest OK.
I widzisz mamy tutaj kolejny problem.
Który mówi że koment ma napis na TVN.
Zobaczmy dlaczego ma ok. .
Ponieważ tutaj przekazuje Bóg zamiast Bóg
i komet czyli te tablice komentarzy którą
tutaj dostaliśmy w porządku teraz już powinno być OK wróćmy
do kodu jest ok i mamy tutaj wyświetlany ten jeden komentarz który ta książka
zawiera a więc nasz stan jest aktualizowany kiedy się zakończy.
Mamy teraz pewnego rodzaju elastyczność czyli kiedy przyjdą nowe dane subskrypcji
no to będziemy mogli również zrobić set koment i zaktualizować komentarze i
powiększyć tą naszą tablicę komentarzy o nowy komentarz a wiec komentujemy ten kod
z powrotem i tutaj będziemy chcieli zrobić subskrypcję komend
AT.
Dodajmy taką subskrypcję.
Otwieramy profil czyli działamy dokładnie tak samo jak serwery.
Tworzymy subskrypcję.
Możemy ją nazwać on Komentarz red.
I tutaj musimy stworzyć zmienną Buka ID
czyli dokładnie tą zmienną którą przekazujemy w tym miejscu.
Jest ona typu IDE czyli dokładnie tego
typu który jest zdefiniowany w naszym serwerze
i tutaj używamy metody komentarzy.
Jak widzisz jest to dokładnie to co robiliśmy program a więc nie ma to nic
nowego natomiast po prostu implementacja to teraz
w aplikacji.
Tutaj jako blokadę
przekażemy Bóg IT. Ok.
To co będziemy chcieli wybrać to id i content.
OK.
Ponieważ dokładnie takich dwóch pól używamy w widoku czyli jako klucz mamy
radę i jako kontent jest komend kropka komplet
w porządku.
Teraz mamy już subskrypcję gotową więc musimy jeszcze poprawić naszego Chucka już
subskrypcję i dodać tutaj opcję subskrypcji.
Data.
I to jest również kolwiek
które nam powietrze jakieś nowe dane z subskrypcji przeszły.
Tutaj możemy do struktury zabrać od razu obiekt.
Przypisać subskrypcję data
to jest część obiektu który przechodzi
z naszej subskrypcji i jest on opisany w dokumentacji
i teraz możemy sobie tutaj stworzyć koncert Connect.
Będzie to tablica i na początku będziemy
chcieli dodać aktualne komentarze czyli używamy operatora i wrzucamy do tej nowej
tablicy aktualne komentarze ale również nową tablicę z komentarzami zwiększamy o
ten komentarz który tutaj przyszedł czyli subskrypcję data data.
I tutaj będzie komend
AT czyli dokładnie tak jak tutaj zdefiniować liczby subskrypcji.
Moglibyśmy tutaj również zrobić komend aby użyć Alias
i wtedy tutaj użyjemy po prostu komend.
Teraz musimy jedynie jeszcze zrobić setki komend
i zaktualizować nasz stan do nawet komentarzy.
Ok. Przejdźmy teraz na stronę.
Jak widzisz nic się nie zmienia.
Przejdźmy do zakładki Network i od filtru my tutaj web socket.
To co tutaj możesz zobaczyć
to to że mamy jakieś rzeczy z Local host.
Przejdźmy może na pierwszy.
Może na początku jeszcze to jeszcze odświeża stronę.
OK teraz będzie czytelni.
I tutaj mamy otwarty kanał web socket.
Z naszej aplikacji przejdźmy na Messenger.
I tutaj mamy kontakt z naszym serwerem czyli tutaj
mówimy że jest to start czyli start i wysyłamy Buka IT.
Czyli nasze blokady.
I mówimy że na sucho żyjemy właśnie na takie obłok IT.
Tutaj mamy nasze QWERTY czyli subskrypcję komend AT
czyli nasz serwer już teraz wie że jest
nowy subskrybentów i powinien on do niego wysłać dane kiedy ktoś doda komentarz.
OK. Więc po prostu teraz dodamy nowy komentarz
i powinno się automatycznie pokazać przejdźmy do Play prawda.
I tutaj możemy z historii znaleźć może
komentarz.
Ok mamy taką mutację.
Użyjemy jej tutaj jest taki IT.
Może po prostu
zmienimy tę blokadę na ten aktualny czyli ten który wysłaliśmy lokacie.
Czyli dokładnie te
ok. .
Więc będziemy dodawać do tej książki nowy
komentarz chyba nawet jest taki sam natomiast Wklej go aby być pewnym.
Teraz to troszeczkę może z winy
i to na co możesz zwrócić uwagę to to że komentarz przyjdzie automatycznie.
Natomiast również prosiłbym aby zwrócił uwagę tutaj na konsolę i zakładkę Network
ponieważ przyjdzie Nowa ramka w naszym lokal Host czyli nowy Message w
naszym otwartym kanale.
Może to spróbuję troszeczkę rozwinąć.
Odświeża.
I teraz dodajemy nowy komentarz czyli koment i on będzie zaaprobowany.
Ok.
Jak widzisz pan tutaj pojawił się automatycznie no i również mamy tutaj
nowe dane czyli że przeszedł dany komentarz i jest to.
Jest to w tym miejscu.
Czyli mamy tutaj idę
i ten komentarz który przeszedł jeżeli tutaj podejmiemy tę ramkę
to dokładnie jest tutaj całe Palau czyli
data komend red content czyli dokładnie dostaliśmy nową ramkę
którą wysłał nam nasz serwer czyli
powiedzmy że teraz tutaj jeszcze z innego urządzenia ktoś dodaje kolejny komentarz.
I również na stronie pokaże się ono
automatycznie ponieważ nasza aplikacja automatycznie Abbey Theatre.
Natomiast to co jest ważne to również ta ramka się pojawi czyli mamy otwarty kanał
web socket I tutaj pojawiają się ramki więc wykonujemy to jeszcze raz.
Jak widzisz pojawiła się kolejna ramka a więc mamy dodany kolejny komentarz.
To jest dokładnie to co daliśmy w aplikacji.
Czyli mamy teraz otwarty kanał i możemy w real time
dodawać komentarze oraz jesteśmy obserwowani i William update.
Te komentarze na stronie
i to wszystko w temacie subskrypcji ja zapraszam Cie do kolejnej lekcji gdzie
zajmiemy się mutacjami w naszej aplikacji Richard.