GraphQL: GraphQL Playground
Techniki Pracy
2 godz. 14 min · Full-stack i Programowanie
Przemysław NowakSoftware EngineerCzego się nauczysz
- Wyjaśnienie różnić pomiędzy REST API a GraphQL
- Omówienie trzech trzonów GraphQL czyli Query, Mutation, Subscription
- Wprowadzenie do biblioteki Apollo
- Wyjaśnienie jak korzystać z dokumentacji serwera GraphQL
- Stworzenie pełnoprawnej aplikacji Apollo GraphQL + React
Witaj w świecie grafów i zapytań
W 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.
Mutacje czyli zapisywanie danych
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.
Aplikacja w czasie rzeczywistym
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 czyli narzędzie do łatwej komunikacji z GraphQL
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.
GraphQL a rynek pracy
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ć.
Dla kogo jest ten kurs?
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 zaprezentuję Ci playground,
czyli znajdujemy się na adresie http://localhost:4000/,
czyli dokładnie tym na którym działa nasz serwer,
który stworzyliśmy i zainstalowaliśmy w poprzedniej lekcji.
Playground został stworzony przez twórców GraphQL'a
do testowania swoich query, mutacji czy subskrypcji
i możemy to zrobić w środkowej jego części.
Mamy tutaj edytor po lewej części
i po prawej części będzie nam się wyświetlał wynik
naszych query czy mutacji czy subskrypcji.
Aby wykonać subskrypcję będziemy musieli
klikać ten przycisk execute, no i to w zasadzie wszystko
jeżeli chodzi o najważniejsze części playgrounda.
Poza tym mamy jeszcze w środkowej części dokumentację oraz schema.
My na przestrzeni całego kursu będziemy korzystać z dokumentacji,
ponieważ w mojej opinii jest to dużo bardziej czytelna metoda
do używania metod zaimplementowanych przez serwer.
Dokumentacja dzieli się na trzy części: query, mutacje oraz subskrypcję.
My będziemy korzystać z tych wszystkich części na przestrzeni całego kursu,
natomiast nie musimy korzystać z wyszukiwarki, ponieważ tutaj tych
metod jest stosunkowo mało.
W dużej aplikacji może ich się zdarzyć dużo, więc wtedy jest to
jak najbardziej przydatne.
W górnej części playgrounda mamy zakładki.
Te zakładki możemy nazywać, możemy dodawać nowe.
Mamy również prettify, przycisk do upiększania naszego kodu
oraz mamy zakładkę historii.
Z tej zakładki będziemy stosunkowo często korzystać.
Tutaj będzie cała historia wykonywanych naszych query,
więc jeżeli będziemy się chcieli cofnąć o krok do tyłu,
to jak najbardziej będziemy mogli tutaj to zrobić,
wybrać takie query i je użyć ponownie.
W dolnej części playgrounda mamy dwa przyciski.
Jest to query variables oraz http headers.
Query variables będziemy używać w kolejnych lekcjach i wytłumaczę
Ci dokładnie co tam przekazujemy i dlaczego to będzie używane.
Powiem ci co nieco o http headers, ponieważ tego na przestrzeni kursu
używać nie będziemy.
Natomiast gdybyś potrzebował dodać jakiś header do nagłówka
w naszym requeście to możesz to zrobić w tym miejscu.
Na przykład jeżeli nasz serwer który, działa pod localhost 4000
potrzebuje mieć jakiś header autoryzacyjny przy zapytaniach,
no to oczywiście możesz tutaj dodać takiego JSON'a z headerem authorization
i tak dalej.
Czyli to zależy jaka jest implementacja serwera i czego on wymaga.
W prawym górnym rogu jest ikonka ustawień
i tutaj możesz sobie skonfigurować playground,
możesz wybrać takie opcje jak czcionki itd.
Ja tu tylko i wyłącznie zmieniłem font-size,
abyś lepiej mógł widzieć pisane query na przestrzeni całego kursu.
Ostatnią rzeczą jaką chcę Ci pokazać to jest ta dokumentacja
oraz fakt, że na przestrzeni całego kursu będziemy pracować
nad tak zwaną aplikacją książek.
Czyli według tych metod będziemy pobierać książki, pobierać autora,
dodawać książki, autora czy komentarze.
Również będziemy się subskrybować na dodanie komentarza
czyli będziemy tworzyć swego rodzaju real-time aplikację.
Ja już teraz nie mogę się doczekać i zapraszam Cię do kolejnych lekcji.