SlideShare a Scribd company logo
Automatyzacja tworzenia
frontendu z wykorzystaniem
GraphQL
Jak wdrożyć GraphQL
do aplikacji w React.js
Jak generator kodu GraphQL
może ułatwić nam życie?
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…
Cześć 👋
Szymon Chudy
Frontend Developer
@The Software House
jestem Szymon ;)
Czym jest GraphQL?
w wielkim skrócie
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)
SDL?
Schema Definition Language
Czym jest SDL?
● To język typowany o bardzo prostej składni, która
pozwala zwięźle zdefiniować schemat danych…
(w wielkim skrócie)
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)
Ale jak to ma się do frontendu?
miło, że pytacie ;-)
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
I to ma być takie fajne?
jeszcze nie…
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 ;-)
Kolejne warstwy abstrakcji
● automatyzacja tworzenia hooków
● automatyzacja tworzenia typów
● możliwość korzystania ze schemy lokalnej lub
z tzw. introspection query
● niezliczone możliwości konfiguracyjne
Apollo Client
+
GraphQL Code Generator
$ 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
Wpinamy Apollo do Reacta
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!
Konfiguracja generatora
( codegen.yml )
lub .ts, .js, .json
Konfiguracja generatora
string or string[ ]
required
API URL
.json file
(that contains GraphQL Introspection JSON)
Local .graphql files
schema.graphql
src/**/*.graphql
[]
!*.generated.graphql
Konfiguracja generatora
string or string[ ]
Local .graphql files
src/**/*.graphql
src/documents/**/*.gql
Documents Scanner
src/**/!(*.d).{ts,tsx}
Konfiguracja generatora
required
required
required
poziom globalny
to commit or not to commit?
(Work)flow
🥰
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
i voilà ;-)
Dokładnie tak samo możemy
zrobić z mutation
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
Konfiguracja IDE
{
"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
Dziękuję

More Related Content

Similar to Automatyzacja tworzenia frontendu z wykorzystaniem GraphQL

Grok Artykul
Grok ArtykulGrok Artykul
Grok Artykul
Wojciech Lichota
 
Produkcja aplikacji internetowych
Produkcja aplikacji internetowychProdukcja aplikacji internetowych
Produkcja aplikacji internetowych
Tomasz Borowski
 
Integracja Django z Google Cloud Platform
Integracja Django z Google Cloud PlatformIntegracja Django z Google Cloud Platform
Integracja Django z Google Cloud Platform
Fly on the cloud
 
react-pl.pdf
react-pl.pdfreact-pl.pdf
react-pl.pdf
ssuser65180a
 
Codeception - jak zacząć pisać automatyczne testy do Drupala [PL]
Codeception - jak zacząć pisać automatyczne testy do Drupala [PL]Codeception - jak zacząć pisać automatyczne testy do Drupala [PL]
Codeception - jak zacząć pisać automatyczne testy do Drupala [PL]
Droptica
 
[WHUG] Wielki brat patrzy - czyli jak zbieramy dane o użytkownikach allegro
[WHUG] Wielki brat patrzy - czyli jak zbieramy dane o użytkownikach allegro[WHUG] Wielki brat patrzy - czyli jak zbieramy dane o użytkownikach allegro
[WHUG] Wielki brat patrzy - czyli jak zbieramy dane o użytkownikach allegro
allegro.tech
 
Jak podwoić wartość kodu .NET?
Jak podwoić wartość kodu .NET?Jak podwoić wartość kodu .NET?
Jak podwoić wartość kodu .NET?
javOnet
 
Michał Dec - Quality in Clouds
Michał Dec - Quality in CloudsMichał Dec - Quality in Clouds
Michał Dec - Quality in Clouds
kraqa
 
GraphQl w Magento 2.3 - wprowadzenie, porównanie i customowe endpointy
GraphQl w Magento 2.3 - wprowadzenie, porównanie i customowe endpointyGraphQl w Magento 2.3 - wprowadzenie, porównanie i customowe endpointy
GraphQl w Magento 2.3 - wprowadzenie, porównanie i customowe endpointy
Anna Kurnat
 
Extjs & netzke
Extjs & netzkeExtjs & netzke
Extjs & netzkeGaldoMedia
 
DSL - DYI
DSL - DYIDSL - DYI
Aplikacje internetowe (2010)
Aplikacje internetowe (2010)Aplikacje internetowe (2010)
Aplikacje internetowe (2010)
Adrian Kalbarczyk
 
Programowanie Komponentowe: #D Model komponentowy OSGi
Programowanie Komponentowe: #D Model komponentowy OSGiProgramowanie Komponentowe: #D Model komponentowy OSGi
Programowanie Komponentowe: #D Model komponentowy OSGiMikołaj Olszewski
 
Środowisko PWA
Środowisko PWAŚrodowisko PWA
AngularJS (nie) nadaje się do dużego projektu
AngularJS (nie) nadaje się do dużego projektuAngularJS (nie) nadaje się do dużego projektu
AngularJS (nie) nadaje się do dużego projektu
3camp
 
AngularJS (nie) nadaje się do dużych pojektów.
AngularJS (nie) nadaje się do dużych pojektów.AngularJS (nie) nadaje się do dużych pojektów.
AngularJS (nie) nadaje się do dużych pojektów.
Rafał Filipek
 
Programowanie Komponentowe: #5 Wprowadzenie do środowiska .NET
Programowanie Komponentowe: #5 Wprowadzenie do środowiska .NETProgramowanie Komponentowe: #5 Wprowadzenie do środowiska .NET
Programowanie Komponentowe: #5 Wprowadzenie do środowiska .NETMikołaj Olszewski
 
Domain Driven Development
Domain Driven DevelopmentDomain Driven Development
Domain Driven Development
Konrad Russa
 
Podstawy programowania w Drupalu - Drupal idzie na studia - Jarosław Sobiecki
Podstawy programowania w Drupalu - Drupal idzie na studia - Jarosław SobieckiPodstawy programowania w Drupalu - Drupal idzie na studia - Jarosław Sobiecki
Podstawy programowania w Drupalu - Drupal idzie na studia - Jarosław Sobiecki
Grzegorz Bartman
 
Code driven development w Drupalu 7 | DrupalCamp Wrocław 2014
Code driven development w Drupalu 7 | DrupalCamp Wrocław 2014Code driven development w Drupalu 7 | DrupalCamp Wrocław 2014
Code driven development w Drupalu 7 | DrupalCamp Wrocław 2014
Grzegorz Bartman
 

Similar to Automatyzacja tworzenia frontendu z wykorzystaniem GraphQL (20)

Grok Artykul
Grok ArtykulGrok Artykul
Grok Artykul
 
Produkcja aplikacji internetowych
Produkcja aplikacji internetowychProdukcja aplikacji internetowych
Produkcja aplikacji internetowych
 
Integracja Django z Google Cloud Platform
Integracja Django z Google Cloud PlatformIntegracja Django z Google Cloud Platform
Integracja Django z Google Cloud Platform
 
react-pl.pdf
react-pl.pdfreact-pl.pdf
react-pl.pdf
 
Codeception - jak zacząć pisać automatyczne testy do Drupala [PL]
Codeception - jak zacząć pisać automatyczne testy do Drupala [PL]Codeception - jak zacząć pisać automatyczne testy do Drupala [PL]
Codeception - jak zacząć pisać automatyczne testy do Drupala [PL]
 
[WHUG] Wielki brat patrzy - czyli jak zbieramy dane o użytkownikach allegro
[WHUG] Wielki brat patrzy - czyli jak zbieramy dane o użytkownikach allegro[WHUG] Wielki brat patrzy - czyli jak zbieramy dane o użytkownikach allegro
[WHUG] Wielki brat patrzy - czyli jak zbieramy dane o użytkownikach allegro
 
Jak podwoić wartość kodu .NET?
Jak podwoić wartość kodu .NET?Jak podwoić wartość kodu .NET?
Jak podwoić wartość kodu .NET?
 
Michał Dec - Quality in Clouds
Michał Dec - Quality in CloudsMichał Dec - Quality in Clouds
Michał Dec - Quality in Clouds
 
GraphQl w Magento 2.3 - wprowadzenie, porównanie i customowe endpointy
GraphQl w Magento 2.3 - wprowadzenie, porównanie i customowe endpointyGraphQl w Magento 2.3 - wprowadzenie, porównanie i customowe endpointy
GraphQl w Magento 2.3 - wprowadzenie, porównanie i customowe endpointy
 
Extjs & netzke
Extjs & netzkeExtjs & netzke
Extjs & netzke
 
DSL - DYI
DSL - DYIDSL - DYI
DSL - DYI
 
Aplikacje internetowe (2010)
Aplikacje internetowe (2010)Aplikacje internetowe (2010)
Aplikacje internetowe (2010)
 
Programowanie Komponentowe: #D Model komponentowy OSGi
Programowanie Komponentowe: #D Model komponentowy OSGiProgramowanie Komponentowe: #D Model komponentowy OSGi
Programowanie Komponentowe: #D Model komponentowy OSGi
 
Środowisko PWA
Środowisko PWAŚrodowisko PWA
Środowisko PWA
 
AngularJS (nie) nadaje się do dużego projektu
AngularJS (nie) nadaje się do dużego projektuAngularJS (nie) nadaje się do dużego projektu
AngularJS (nie) nadaje się do dużego projektu
 
AngularJS (nie) nadaje się do dużych pojektów.
AngularJS (nie) nadaje się do dużych pojektów.AngularJS (nie) nadaje się do dużych pojektów.
AngularJS (nie) nadaje się do dużych pojektów.
 
Programowanie Komponentowe: #5 Wprowadzenie do środowiska .NET
Programowanie Komponentowe: #5 Wprowadzenie do środowiska .NETProgramowanie Komponentowe: #5 Wprowadzenie do środowiska .NET
Programowanie Komponentowe: #5 Wprowadzenie do środowiska .NET
 
Domain Driven Development
Domain Driven DevelopmentDomain Driven Development
Domain Driven Development
 
Podstawy programowania w Drupalu - Drupal idzie na studia - Jarosław Sobiecki
Podstawy programowania w Drupalu - Drupal idzie na studia - Jarosław SobieckiPodstawy programowania w Drupalu - Drupal idzie na studia - Jarosław Sobiecki
Podstawy programowania w Drupalu - Drupal idzie na studia - Jarosław Sobiecki
 
Code driven development w Drupalu 7 | DrupalCamp Wrocław 2014
Code driven development w Drupalu 7 | DrupalCamp Wrocław 2014Code driven development w Drupalu 7 | DrupalCamp Wrocław 2014
Code driven development w Drupalu 7 | DrupalCamp Wrocław 2014
 

More from The Software House

Jak kraść miliony, czyli o błędach bezpieczeństwa, które mogą spotkać również...
Jak kraść miliony, czyli o błędach bezpieczeństwa, które mogą spotkać również...Jak kraść miliony, czyli o błędach bezpieczeństwa, które mogą spotkać również...
Jak kraść miliony, czyli o błędach bezpieczeństwa, które mogą spotkać również...
The Software House
 
Uszanowanko Podsumowanko
Uszanowanko PodsumowankoUszanowanko Podsumowanko
Uszanowanko Podsumowanko
The Software House
 
Jak efektywnie podejść do certyfikacji w AWS?
Jak efektywnie podejść do certyfikacji w AWS?Jak efektywnie podejść do certyfikacji w AWS?
Jak efektywnie podejść do certyfikacji w AWS?
The Software House
 
O co chodzi z tą dostępnością cyfrową?
O co chodzi z tą dostępnością cyfrową?O co chodzi z tą dostępnością cyfrową?
O co chodzi z tą dostępnością cyfrową?
The Software House
 
Chat tekstowy z użyciem Amazon Chime
Chat tekstowy z użyciem Amazon ChimeChat tekstowy z użyciem Amazon Chime
Chat tekstowy z użyciem Amazon Chime
The Software House
 
Migracje danych serverless
Migracje danych serverlessMigracje danych serverless
Migracje danych serverless
The Software House
 
Jak nie zwariować z architekturą Serverless?
Jak nie zwariować z architekturą Serverless?Jak nie zwariować z architekturą Serverless?
Jak nie zwariować z architekturą Serverless?
The Software House
 
Analiza semantyczna artykułów prasowych w 5 sprintów z użyciem AWS
Analiza semantyczna artykułów prasowych w 5 sprintów z użyciem AWSAnaliza semantyczna artykułów prasowych w 5 sprintów z użyciem AWS
Analiza semantyczna artykułów prasowych w 5 sprintów z użyciem AWS
The Software House
 
Feature flags na ratunek projektu w JavaScript
Feature flags na ratunek projektu w JavaScriptFeature flags na ratunek projektu w JavaScript
Feature flags na ratunek projektu w JavaScript
The Software House
 
Typowanie nominalne w TypeScript
Typowanie nominalne w TypeScriptTypowanie nominalne w TypeScript
Typowanie nominalne w TypeScript
The Software House
 
Serverless Compose vs hurtownia danych
Serverless Compose vs hurtownia danychServerless Compose vs hurtownia danych
Serverless Compose vs hurtownia danych
The Software House
 
Testy API: połączenie z bazą danych czy implementacja w pamięci
Testy API: połączenie z bazą danych czy implementacja w pamięciTesty API: połączenie z bazą danych czy implementacja w pamięci
Testy API: połączenie z bazą danych czy implementacja w pamięci
The Software House
 
Jak skutecznie read model. Case study
Jak skutecznie read model. Case studyJak skutecznie read model. Case study
Jak skutecznie read model. Case study
The Software House
 
Firestore czyli ognista baza od giganta z Doliny Krzemowej
Firestore czyli ognista baza od giganta z Doliny KrzemowejFirestore czyli ognista baza od giganta z Doliny Krzemowej
Firestore czyli ognista baza od giganta z Doliny Krzemowej
The Software House
 
Jak utrzymać stado Lambd w ryzach
Jak utrzymać stado Lambd w ryzachJak utrzymać stado Lambd w ryzach
Jak utrzymać stado Lambd w ryzach
The Software House
 
Jak poskromić AWS?
Jak poskromić AWS?Jak poskromić AWS?
Jak poskromić AWS?
The Software House
 
O łączeniu Storyblok i Next.js
O łączeniu Storyblok i Next.jsO łączeniu Storyblok i Next.js
O łączeniu Storyblok i Next.js
The Software House
 
Amazon Step Functions. Sposób na implementację procesów w chmurze
Amazon Step Functions. Sposób na implementację procesów w chmurzeAmazon Step Functions. Sposób na implementację procesów w chmurze
Amazon Step Functions. Sposób na implementację procesów w chmurze
The Software House
 
Od Figmy do gotowej aplikacji bez linijki kodu
Od Figmy do gotowej aplikacji bez linijki koduOd Figmy do gotowej aplikacji bez linijki kodu
Od Figmy do gotowej aplikacji bez linijki kodu
The Software House
 
Co QA może i czego nie powinien się bać?
Co QA może i czego nie powinien się bać?Co QA może i czego nie powinien się bać?
Co QA może i czego nie powinien się bać?
The Software House
 

More from The Software House (20)

Jak kraść miliony, czyli o błędach bezpieczeństwa, które mogą spotkać również...
Jak kraść miliony, czyli o błędach bezpieczeństwa, które mogą spotkać również...Jak kraść miliony, czyli o błędach bezpieczeństwa, które mogą spotkać również...
Jak kraść miliony, czyli o błędach bezpieczeństwa, które mogą spotkać również...
 
Uszanowanko Podsumowanko
Uszanowanko PodsumowankoUszanowanko Podsumowanko
Uszanowanko Podsumowanko
 
Jak efektywnie podejść do certyfikacji w AWS?
Jak efektywnie podejść do certyfikacji w AWS?Jak efektywnie podejść do certyfikacji w AWS?
Jak efektywnie podejść do certyfikacji w AWS?
 
O co chodzi z tą dostępnością cyfrową?
O co chodzi z tą dostępnością cyfrową?O co chodzi z tą dostępnością cyfrową?
O co chodzi z tą dostępnością cyfrową?
 
Chat tekstowy z użyciem Amazon Chime
Chat tekstowy z użyciem Amazon ChimeChat tekstowy z użyciem Amazon Chime
Chat tekstowy z użyciem Amazon Chime
 
Migracje danych serverless
Migracje danych serverlessMigracje danych serverless
Migracje danych serverless
 
Jak nie zwariować z architekturą Serverless?
Jak nie zwariować z architekturą Serverless?Jak nie zwariować z architekturą Serverless?
Jak nie zwariować z architekturą Serverless?
 
Analiza semantyczna artykułów prasowych w 5 sprintów z użyciem AWS
Analiza semantyczna artykułów prasowych w 5 sprintów z użyciem AWSAnaliza semantyczna artykułów prasowych w 5 sprintów z użyciem AWS
Analiza semantyczna artykułów prasowych w 5 sprintów z użyciem AWS
 
Feature flags na ratunek projektu w JavaScript
Feature flags na ratunek projektu w JavaScriptFeature flags na ratunek projektu w JavaScript
Feature flags na ratunek projektu w JavaScript
 
Typowanie nominalne w TypeScript
Typowanie nominalne w TypeScriptTypowanie nominalne w TypeScript
Typowanie nominalne w TypeScript
 
Serverless Compose vs hurtownia danych
Serverless Compose vs hurtownia danychServerless Compose vs hurtownia danych
Serverless Compose vs hurtownia danych
 
Testy API: połączenie z bazą danych czy implementacja w pamięci
Testy API: połączenie z bazą danych czy implementacja w pamięciTesty API: połączenie z bazą danych czy implementacja w pamięci
Testy API: połączenie z bazą danych czy implementacja w pamięci
 
Jak skutecznie read model. Case study
Jak skutecznie read model. Case studyJak skutecznie read model. Case study
Jak skutecznie read model. Case study
 
Firestore czyli ognista baza od giganta z Doliny Krzemowej
Firestore czyli ognista baza od giganta z Doliny KrzemowejFirestore czyli ognista baza od giganta z Doliny Krzemowej
Firestore czyli ognista baza od giganta z Doliny Krzemowej
 
Jak utrzymać stado Lambd w ryzach
Jak utrzymać stado Lambd w ryzachJak utrzymać stado Lambd w ryzach
Jak utrzymać stado Lambd w ryzach
 
Jak poskromić AWS?
Jak poskromić AWS?Jak poskromić AWS?
Jak poskromić AWS?
 
O łączeniu Storyblok i Next.js
O łączeniu Storyblok i Next.jsO łączeniu Storyblok i Next.js
O łączeniu Storyblok i Next.js
 
Amazon Step Functions. Sposób na implementację procesów w chmurze
Amazon Step Functions. Sposób na implementację procesów w chmurzeAmazon Step Functions. Sposób na implementację procesów w chmurze
Amazon Step Functions. Sposób na implementację procesów w chmurze
 
Od Figmy do gotowej aplikacji bez linijki kodu
Od Figmy do gotowej aplikacji bez linijki koduOd Figmy do gotowej aplikacji bez linijki kodu
Od Figmy do gotowej aplikacji bez linijki kodu
 
Co QA może i czego nie powinien się bać?
Co QA może i czego nie powinien się bać?Co QA może i czego nie powinien się bać?
Co QA może i czego nie powinien się bać?
 

Automatyzacja tworzenia frontendu z wykorzystaniem GraphQL