GraphQL: Czym jest GraphQL?
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 chciałbym Ci powiedzieć czym właściwie jest GraphQL,
czyli GraphQL został stworzony przez programistów Facebooka,
ponieważ mieli oni dużo problemów pomiędzy synchronizacją danych
w aplikacjach mobilnych a w aplikacjach desktopowych.
Dlatego zdecydowali się stworzyć jedno, elastyczne rozwiązanie,
więc tak jak kolejny punkt mówi, jest to elastyczny język zapytań.
W GraphQL'u zawsze możemy dostać te dane, o które zapytamy.
Redukuje on również ilość żądań do serwera,
dlatego, że nie potrzebujemy wysyłać żądań
kilku po to żeby dostać kilka różnych zestawów danych,
tylko zawsze dostaniemy jeden zestaw danych za pomocą jednego żądania.
Również GraphQL opiera się na grafach.
Tutaj widzisz na tym zdjęciu grafy danych oraz ich połączenia w GraphQL.
To na przykładzie możesz sobie wyobrazić, że będziemy działać na aplikacji książek
i jak te grafy mówią, są one pewnego rodzaju połączone.
Na przykład graf Books jest połączony z grafem Authors
oraz graf Authors jest połączony z grafem Books,
więc kiedy będziemy szukać jakiegoś autora w podzbiorze Books,
to ten podzbiór sięgnie do podzbioru Authors i zwróci nam dane
z tego właśnie podzbioru.
To tworzy pewnego rodzaju elastyczność.
Również kiedy byśmy sięgnęli po pole comments które jest w podzbiorze Books,
to również zwróci to dane z podzbioru comments
czyli jak widzisz to wszystko tworzy połączenia grafów.
Tutaj możesz zobaczyć czym tak naprawdę jest ten elastyczny język zapytań.
Mamy tutaj przykład już prawdziwego query w GraphQL
i to query jak widzisz mówi,
że pobierz mi Books pobierz ID oraz name dla tego Books dla tych książek.
Natomiast pobierz mi również Authora
i pobierz Authora oraz jego firstName oraz lastName.
To co możesz zobaczyć to tak naprawdę, że te teksty na różowo opisują nasze podzbiory.
Kiedy cofnę się do poprzedniego slajdu,
możesz zobaczyć, że mamy tutaj podzbiór Books oraz podzbiór Authors.
Dokładnie w taki sam sposób opisuje to nasze query,
czyli nie wykonujemy dwóch niepotrzebnych żądań po książki oraz po autora.
Natomiast wszystko dostajemy w jednym zestawie danych.
Również chciałabym Ci pokazać różnice między GraphQL a Rest API.
Rest API, z którego już zapewne korzystałeś.
No więc Rest API posiada wiele endpointów adresów żądań do serwera podane
oraz nie ma elastyczności zawsze dostajemy ten sam zestaw danych.
Czyli jeżeli zapytamy o książki to zawsze dostaniemy te same pola.
Dostaniemy ID, title i tak dalej.
Natomiast w GraphQL'u możemy wybrać sobie jakie dane chcemy.
No więc tak jak mówiłem GraphQL jest jeden endpoint, elastyczny pozwala na
wybranie konkretnych danych, tych których potrzebujemy,
czyli jeżeli na jakimś widoku potrzebujemy tylko title
i nie potrzebujemy np. autora
to nie sięgamy po niego ponieważ nasz endpoint jest elastyczny.
Nie musimy zawsze dostawać tego samego zestawu danych.
Tutaj przygotowałem dla Ciebie graf, który pokazuje tą elastyczność GraphQL'a.
Jak widzisz mamy tutaj bazę danych.
Dodatkowo jest warstwa GraphQL'a jest to nasz serwer GraphQL'owy.
No i mamy użytkowników, którzy wysyłają jakieś query podane.
Możesz zobaczyć że Mobile App wysyła query po dane użytkownika
takie jak firstName oraz lastName,
a aplikacja desktopowa wysyła firstName, lastName, age, phoneNumber,
ponieważ być może implementacja jest taka,
że aplikacja desktopowa potrzebuje więcej danych i wyświetla
więcej danych dla użytkownika,
a aplikacja mobilna jest po prostu okrojona.
Jeżeli byśmy działali w oparciu o Rest API to tutaj byśmy zawsze dostawali te same dane,
chyba żebyśmy mieli inny endpoint.
Możemy sobie wyobrazić że dla Rest API mielibyśmy /user i /mobile i to by zwracało okrojone dane.
A dla desktopu mielibyśmy /user i /desktop
czyli dwa osobne endpointy byśmy potrzebowali i dwie osobne implementacje
aby obsłużyć i mobile i desktop.
W GraphQL'u jest to zawsze jeden endpoint
natomiast w query mówimy jakie konkretne dane chcemy dla którego widoku.