1.
Automatyzacja tworzenia
frontendu z wykorzystaniem
GraphQL

2.
Jak wdrożyć GraphQL
do aplikacji w React.js

3.
Jak generator kodu GraphQL
może ułatwić nam życie?

4.
Plan na dziś
● Wprowadzenie do GraphQL
● Od fetcha do finalnego rozwiązania,
czyli problemy wynikające z kolejnych
warstw abstrakcji
● Konfiguracja projektu Reactowego
z Apollo Client i GraphQL Codgen
● Wspólne przejście przez workflow
ale najpierw…

5.
Cześć 👋
Szymon Chudy
Frontend Developer
@The Software House
jestem Szymon ;)

6.
Czym jest GraphQL?
w wielkim skrócie

7.
Czym jest GraphQL?
● Język zapytań, który umożliwia pobieranie danych
w sposób dynamiczny i bardzo elastyczny
● Serwer GraphQL udostępnia jeden endpoint, który
obsługuje zapytania, które możemy definiować
wedle potrzeb
● Definiujemy je używając SDL i wykorzystując do
tego metodę POST
(w wielkim skrócie)

8.
SDL?
Schema Definition Language

9.
Czym jest SDL?
● To język typowany o bardzo prostej składni, która
pozwala zwięźle zdefiniować schemat danych…
(w wielkim skrócie)

10.
Czym jest SDL?
● To język typowany o bardzo prostej składni, która
pozwala zwięźle zdefiniować schemat danych…
● … oraz określić sposoby ich pozyskiwania i
modyfikowania, czyli queries i mutations
(w wielkim skrócie)

11.
Ale jak to ma się do frontendu?
miło, że pytacie ;-)

12.
Standardowy GraphQL POST request wykorzystuje
content-type application/json, i zawiera body w formie:
GraphQL POST Request
query string – obowiązkowe
nieobowiązkowe (zazwyczaj)
nieobowiązkowe jeśli nie korzystamy ze zmiennych w query

13.
I to ma być takie fajne?
jeszcze nie…

14.
Typowe problemy z fetchowaniem danych
● State, cache
● Kontrolki
● Errors
● Rozdzielenie warstwy UI od logiki fetchującej dane
● Rozwój i utrzymywanie aplikacji
Na szczęście nie musimy wymyślać koła na nowo ;-)

15.
Kolejne warstwy abstrakcji

16.
● automatyzacja tworzenia hooków
● automatyzacja tworzenia typów
● możliwość korzystania ze schemy lokalnej lub
z tzw. introspection query
● niezliczone możliwości konfiguracyjne

17.
Apollo Client
+
GraphQL Code Generator

18.
$ npm i @apollo/client
graphql
$ npm i -D @graphql-codegen/cli
@graphql-codegen/near-operation-file-preset
@graphql-codegen/typescript
@graphql-codegen/typescript-operations
@graphql-codegen/typescript-react-apollo
Przykłady, do których przechodzimy zakładają, że startujemy
z czystą aplikacją utworzoną z wykorzystaniem
create-react-app
Instalacja zależności

19.
Wpinamy Apollo do Reacta

20.
Skrypt do generowania kodu
( package.json )
przydatne jeśli chcecie zmienić nazwę pliku konfiguracyjnego
lub wskazać ją ’explicite’
dzięki dołączeniu “dotenv” możemy wykorzystywać
zmienne środowiskowe w pliku konfiguracyjnym!

21.
Konfiguracja generatora
( codegen.yml )
lub .ts, .js, .json

22.
Konfiguracja generatora
string or string[ ]
required

23.
API URL
.json file
(that contains GraphQL Introspection JSON)
Local .graphql files
schema.graphql
src/**/*.graphql
[]
!*.generated.graphql

24.
Konfiguracja generatora
string or string[ ]

25.
Local .graphql files
src/**/*.graphql
src/documents/**/*.gql
Documents Scanner
src/**/!(*.d).{ts,tsx}

26.
Konfiguracja generatora
required
required
required
poziom globalny

27.
to commit or not to commit?

28.
(Work)flow
🥰

29.
1. Tworzymy plik GetTask.gql w folderze src/documents
query GetTask($taskId: ID!) {
task(id: $taskId) {
name
description
}
}
2. Generujemy typy i operacje za pomocą skryptu generate
$ npm run generate
tak będą nazywały się hooki

30.
i voilà ;-)

31.
Dokładnie tak samo możemy
zrobić z mutation

32.
1. Tworzymy plik AddTask.gql w folderze src/documents
mutation AddTask($taskInput: AddTaskInput!) {
addTask(task: $taskInput) {
id
name
description
priority
}
}
2. Generujemy typy i operacje za pomocą skryptu generate
$ npm run generate

33.
Konfiguracja IDE

34.
{
"extensions": {
"endpoints": {
"Default GraphQL Endpoint": {
"url": "${env:REACT_APP_API_URL}",
"schemaPath": "schema.graphql",
"headers": {
"user-agent": "JS GraphQL"
}
}
}
}
}
.graphqlconfig
{
"schema": "schema.graphql"
"schema": "https://graphqlzero.almansi.me/api"
}
.graphqlrc

35.
Dziękuję