Poznaj GraphQL w (trochę więcej niż) 30 minut :)

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

KIM JESTEM? ▸ Michał Taszycki (@mehowte) ▸ 16 lat doświadczenia w programowaniu ▸ Twórca programów szkoleniowych ▸ GraphQL Mastery ▸ Kurs Reacta ▸ Organizator Festiwalu React.js i GraphQL

Slide 3

Slide 3 text

1. ŻARGON GRAPHQL 2. DLACZEGO GRAPHQL? 3. DEMO

Slide 4

Slide 4 text

1. ŻARGON GRAPHQL 2. DLACZEGO GRAPHQL? 3. DEMO 4. NIESPODZIANKA :)

Slide 5

Slide 5 text

1. Co to jest GraphQL? 2. Schema 3. Query 4. Mutation 5. Dokument 6. Serwer 7. Klient 8. Resolver 9. Root Value 10. Overfetching 11. Underfetching 12. Schema stitching 13. Federacja 14. Subskrypcje ŻARGON GRAPHQL

Slide 6

Slide 6 text

1. Graph Query Language - język zapytań i deﬁniowania schematu 2. Standard GraphQL - Ścisła specyﬁkacja języka i implementacji klienta i serwera CO TO JEST GRAPHQL?

Slide 7

Slide 7 text

GRAPHQL SCHEMA

Slide 8

Slide 8 text

ZAPYTANIA GRAPHQL

Slide 9

Slide 9 text

MUTACJE GRAPHQL

Slide 10

Slide 10 text

DOKUMENT GRAPHQL 1. Tekst wysyłany na serwer zawierający conajmniej jedno zapytanie lub mutację

Slide 11

Slide 11 text

1. Deﬁniuje schemat danych 2. Obsługuje zapytania, mutacje i subskrypcje 3. Zwraca dane SERWER GRAPHQL

Slide 12

Slide 12 text

1. Implementacja w dowolnym języku 1. JS/TS - Apollo Server 2. Python - Graphene 3. Rust - Juniper 4. Elixir - Absinthe 2. Z zewnątrz wygląda tak samo SERWER GRAPHQL

Slide 13

Slide 13 text

1. Zwykle komunikuje się po HTTP 1. POST example.com/graphql 2. Może też być częścią lokalnej aplikacji (Gatsby.js) SERWER GRAPHQL

Slide 14

Slide 14 text

1. Coś co potraﬁ komunikować się z serwerem 2. Np CURL :) 3. Zwykle są do tego specjalne biblioteki (dla ułatwienia) KLIENT GRAPHQL

Slide 15

Slide 15 text

1. Funkcja na serwerze dostarczająca dane dla jakiegoś typu 2. Serwery mają domyślne resolvery dla typów wbudowanych 3. Niezbędne przy danych rekurencyjnych RESOLVER

Slide 16

Slide 16 text

1. Coś co możemy przekazać do głównego resolvera 2. rzadko używane 3. przydatne do prototypowania (pokażę na DEMO) ROOT VALUE

Slide 17

Slide 17 text

1. Ściąganie większej ilości danych niż potrzebujemy 2. Powód dlaczego GraphQL > REST ;) OVERFETCHING

Slide 18

Slide 18 text

1. Ściąganie mniejszej ilości danych niż potrzebujemy 2. Konieczność kolejnych zapytań 3. Powód dlaczego GraphQL > REST ;) UNDERFETCHING

Slide 19

Slide 19 text

1. Mechanizm dzielenia jednego serwera GraphQL na mikroserwisy 2. Oparty na… sklejaniu schematów 3. wychodzi z obiegu :) SCHEMA STICHING

Slide 20

Slide 20 text

1. Mechanizm dzielenia jednego serwera GraphQL na mikroserwisy 2. oparty na delegacji 3. Obecnie popularny FEDERACJA

Slide 21

Slide 21 text

1. Nawiązanie stałego połączenia klienta z serwerem 2. Klient robi zapytanie subskrypcyjne i czeka 3. Serwer wysyła dane 4. Klient obsługuje nowe dany gdy tylko się pojawią 5. Często oparte na websocketach SUBSCRIPTION

Slide 22

Slide 22 text

Slide 23

Slide 23 text

JAK PRZEKONAĆ SZEFA?

Slide 24

Slide 24 text

DLACZEGO GRAPHQL?

Slide 25

Slide 25 text

DLACZEGO GRAPHQL? 1. Wewnętrzne API (mobilne i webowe apki chcą innych danych)

Slide 26

Slide 26 text

DLACZEGO GRAPHQL? 1. Wewnętrzne API (mobilne i webowe apki chcą innych danych) 2. Prototypowanie i startupy (w GraphQL łatwiej wprowadzać zmiany)

Slide 27

Slide 27 text

DLACZEGO GRAPHQL? 1. Wewnętrzne API (mobilne i webowe apki chcą innych danych) 2. Prototypowanie i startupy (w GraphQL łatwiej wprowadzać zmiany) 3. Aplikacja to nie tylko CRUD (w GraphQL łatwiej modelować zdarzenia biznesowe)

Slide 28

Slide 28 text

Slide 29

Slide 29 text

DEMO https://codesandbox.io/s/poznaj-graphql-backend-d29nw https://codesandbox.io/s/poznaj-graphql-frontend-0ecmb