GraphQL: Czyste query ze zmiennymi i aliasami
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 pokażę Ci jak tworzyć czyste query ze zmiennymi oraz aliasami
a więc mam nadzieję że rozjaśnią Ci się typy, które omówiliśmy
w poprzedniej akcji.
Przejdźmy do dokumentacji.
Będziemy działać na metodzie getAuthor.
I kiedy wejdziemy w getAuthor, to możesz zobaczyć, że aby pobrać danego autora
musimy podać dane ID, czyli ID autora, który jest w bazie danych.
Stwórzmy sobie takie query.
Za pomocą słowa kluczowego query napiszmy getAuthor.
Jak widzisz playground już podpowiada co mamy zrobić
i teraz w nawiasach musimy podać to ID,
czyli listę argumentów, które query od nas wymaga.
Jak widzisz w dokumentacji mamy tylko ID.
Więc wpiszmy tutaj ID.
ID tak jak pamiętasz w typach jest Stringiem, a więc apostrofy.
Ja takie ID już mam przygotowane
i wybierzmy teraz pola, które chcemy pobrać.
Powiedzmy niech to będzie firstName oraz lastName.
Kiedy wykonam to query, dostaliśmy autora o tym ID z bazy danych.
Jest to Joe Doe.
Natomiast kiedy widzisz ten JSON, który mamy zwrócony,
to nie do końca on jest czytelny.
Metoda getAuthor w query jest czytelna
natomiast kiedy już mamy data, getAuthor
to nie jest to do końca to, co byśmy chcieli w widoku.
Bardziej spodziewałbym się takich danych jak data, autor
i wtedy dane tego autora.
Aby to zrobić możemy użyć aliasu.
Alias powie nam jak pole musi się nazywać w JSONie.
Aby stworzyć alias musimy wpisać jak chcemy nazwać ten alias
oraz dodać dwukropek przed metodą.
Teraz jak widzisz po wykonaniu tego query JSON zwróci nam data, author.
Jest to dla mnie dużo bardziej czytelne jeżeli bym miał
z takimi danymi pracować na widoku.
Co więcej, aliasy możemy dodać również do pól w środku danego query.
Powiedzmy, że na widoku implementujemy firstName jako first_name z undescorem.
Jest to częsta praktyka
więc nasz widok chciałby dostać takie first_name.
Zamiast firstName z camelcase'm.
Wtedy również możemy dodać taki alias
i nasze dane są automatycznie zmapowane do tego, czego oczekuje od nas widok.
Zróbmy to również dla lastName.
Jak widzisz teraz już to query jest znacznie czytelniejsze.
Co więcej możemy to query również tutaj nazwać.
Nazwijmy je getAuthorById.
Teraz kiedy mamy już nazwę, będziemy chcieli również stworzyć zmienną,
dlatego, aby to query było dynamiczne.
Nie chcemy tutaj zawsze pobierać tego samego autora,
natomiast chcemy pobrać różnych autorów za pomocą tego samego query.
Aby to zrobić musimy przekazać to ID do naszej metody.
Więc definiując nazwę query możemy również zdefiniować tutaj zmienne.
Zdefiniujmy zmienną ID.
Aby zdefiniować zmienną, musimy użyć $ oraz nazwę tej zmiennej
i po przecinku musimy wpisać jakiego typu ta zmienna jest.
Kiedy wrócimy do dokumentacji
to widzimy że ta zmienna jest typu ID
i dokładnie takiego samego typu musi być tutaj.
Ponieważ GraphQL będzie walidował te pola podczas wykonywania zapytania.
I w tym momencie,
w tym miejscu możemy podstawić
to id
Wtedy będzie to dynamiczne.
Kiedy w jednym miejscu w widoku będziemy wykonywać getAuthorById
to możemy dynamicznie przekazać id do query
i je wykonać.
Jak widzisz tutaj dostaliśmy błąd, ponieważ ID nie jest przekazane
i jest to poprawne, ponieważ tak naprawdę nie przekazaliśmy
w tym momencie żadnego ID.
Ale jeżeli przypomnisz sobie pierwszą lekcję,
to pokazywałem Ci czym są query variables
i że możemy ich używać do wpisania naszych zmiennych.
W tym miejscu wpiszemy sobie ID.
I to jest dokładnie JSON.
Kiedy zacznę wpisywać ID, to playground już mi podpowiada,
że to query wymaga od nas takich dokładnie pól,
w tym miejscu mamy id.
I w tym miejscu mogę wpisać to id konkretnego autora którego chcę pobrać.
Teraz jeżeli wykonam to query to już wszystko działa.
Poza tym możemy definiować również domyślne ID,
czyli jeżeli nie przekażemy tutaj tego ID.
Możesz sobie wyobrazić, że ten obiekt pochodzi z aplikacji
i teraz go nie ma, bo ktoś po prostu zapomniał to zrobić,
to możemy w tym miejscu przekazać domyślną wartość dla takiej zmiennej.
Kiedy wkleję te ID,
query variables jest czyste i wykonam jeszcze raz query.
To jak widzisz działa to.
Abyś się przekonał, że jeżeli tego nie będzie
i nie będzie to działać to jeszcze raz Ci to pokaże.
Jak widzisz teraz mamy błąd.
Ok.
Jak widzisz wiesz już jak tworzyć czyste query ze zmiennymi aliasami,
ten przykład z podawaniem hard-coded ID nie jest może do końca poprawny,
natomiast w innych query na pewno będzie to dla Ciebie przydatne
oraz również dla nas będzie to przydatne w kolejnych przykładach.
A już teraz zapraszam Cię do kolejnej lekcji,
gdzie pokażę Ci jak pobierać relacyjne dane.
Kod
Query getAuthor · 1 min
query {
getAuthor(id: "d0f001ec-a71c-4631-aa2d-500e3325c718") {
firstName
lastName
}
}Czyste Query getAuthor · 5 min
query getAuthorById($id: ID! = "d0f001ec-a71c-4631-aa2d-500e3325c718") {
author: getAuthor(id: $id) {
first_name: firstName
last_name: lastName
}
}