Sa najnovijom generacijom pametnih tehnologija, sve više i više uredjaja ima potrebu za podacima neophodnim za njihovu osnovnu funkcionalnost. Pametni satovi, frižideri, garažna vrata su samo neki od njih. Razvoj i održavanje API backend aplikacije za usluživanje nekoliko generacija uređaja i njihovih specifičnih potreba postalo je veoma teško i skupo. GraphQL pruža alternativu i promenu u paradigmi izmeštanjem odgovornosti za strukturu podataka u API pozivima ka samom klijentu. Ovo obezbedjuje optimizaciju u prenosu podataka isključujući nepotrebne podatke i u isto vreme, smanjuje kompleksnost API poziva i metoda što ujedno ubrzava i olakšava održavanje istih.

1. designbyheart@gmail.com
Efikasni API servisi
Laravel & GraphQL

2. designbyheart@gmail.com
O meni
Predrag Jevtic
Full stack developer
- web design / development
(JS, CSS, PHP, MySQL od 2007.)
- mobile development
(ObjC, Swift, React Native od 2010.)
- agile practitioner
(Scrum Master, Agile Coach od 2014.)

3. designbyheart@gmail.com
Nedostaci REST API servisa
• Server mora da usluži i web app i brojne
klijente sa različitim potrebama za podatke
(mobile (iOS, Android), desktop (Linux,
MacOS, Windows), TV apps, Internet of Thing
apps…)
• Primer:
api.com/v1/users
api.com/v1/users/edit/2
api.com/v1/users/new

4. designbyheart@gmail.com
Nedostaci REST API servisa
• Problem konzistentnosti - isti atributi
imaju različite tipove podataka
{
"project": {
"tagline": "A query language for APIs”,
"description": null
}
}
{
"project": {
"tagline": "A query language for APIs”,
"description": ""
}
}

5. designbyheart@gmail.com
Nedostaci REST API servisa
• Server driven selection?
• Overfetching - previše informacija koje stižu
u jednom pozivu (REST poziv za listu
odredjenih elemenata dobija često ceo objekat
sa podacima koji nisu potrebni)
• Underfetching - premalo informacija u jednom
REST pozivu što rezultuje slanjem nekoliko
API poziva (često jednog za drugim -
synchronous). Rezultat: sporije prikazivanje
podataka u UI

6. designbyheart@gmail.com
Šta je GraphQL?
• https://graphql.org
• A query language for your API, by Facebook (ReactJS
conference 2015.)
• Pruža kompletan i razumljiv opis podataka u API-ju
• Daje klijentima moć da traže tačno one podatke koji su im
potrebni ubrzavajući komunikaciju isključivanjem
nepotrebnih setova podataka
• Ubrzava razvoj API-ja tokom vremena, smanjuje
kompleksnost istog (smanjuje potrebu za velikim brojem
različitih API poziva sa relativno sličnim setom
podataka)

7. designbyheart@gmail.com
Šta je GraphQL?
• https://graphql.org
• A query language for your API, by Facebook (ReactJS
conference 2015.)
• Pruža kompletan i razumljiv opis podataka u API-ju
• Daje klijentima moć da traže tačno one podatke koji su im
potrebni ubrzavajući komunikaciju isključivanjem
nepotrebnih setova podataka
• Ubrzava razvoj API-ja tokom vremena, smanjuje
kompleksnost istog (smanjuje potrebu za velikim brojem
različitih API poziva sa relativno sličnim setom
podataka)

8. designbyheart@gmail.com
GraphQL Prednosti
• Definija (schema) sa striktnim tipovima attributa
• Nema over ili underfetching-a (klijent dobija precizan
set podataka koji mu je potreban)
• Omogućava rapidni razvoj aplikacija i povećava
produktivnost FE i mobile timova (front end GraphQL
klijenti omogućavaju keširanje, realtime i optimistic UI
update, GraphQL Faker)
• Kompozicija više GraphQL schema (schema stiching)
• Velika open source zajednica i podrška

9. designbyheart@gmail.com
GraphQL Nedostaci
• GraphQL Kompleksnost
• Ograničenje broja poziva
• Keširanje podataka je kompleksnije od REST
pristupa

10. designbyheart@gmail.com
GraphQL implementacija
• Primena i van PHP jezika
• - C# / .NET
• - Clojure
• - Elixir
• - Erlang
• - Go
• - Groovy
• - Java
• - JavaScript
• - PHP
• - Python
• - Scala
• - Ruby

11. designbyheart@gmail.com
Struktura
Queries & Mutations
• Fields
• Arguments
• Aliases
• Fragments
• Operation name
• Variables
• Directives
• Mutations
• Inline fragments

12. designbyheart@gmail.com
Queries & Mutations
https://graphql.org/learn/queries/#fields
Fields
Arguments
Aliases
{ hero(id: “1000”) { name }}
{ hero { name }}
{ empireHero(episode: EMPIRE) { name }}

13. designbyheart@gmail.com
Queries & Mutations
https://graphql.org/learn/queries/#fields
Fragments - konstrukcija grupe field-ova i njihovo
korišćenje u queriju

14. designbyheart@gmail.com
Queries & Mutations
https://graphql.org/learn/queries/#fields
Operation name - imenovanje operacije ili seta
koraka radi lakše ponovne upotrebe kasnije

15. designbyheart@gmail.com
Queries & Mutations
https://graphql.org/learn/queries/#fields
Variables - unapred definisane statične vrednosti
Directives
Mutations - izmena i čuvanje izmenjenih podataka
@include(if: Boolean)
{ hero(episode: $episode)}
mutation CreateReviewForEpisode($ep: Episode!,
$review: ReviewInput!) {
@skip(if: Boolean)

16. designbyheart@gmail.com
Schemas and Types
https://graphql.org/learn/schema
Schema - Definicija data objekta sa striktnim
tipovima atributa
Type Character {
name: String!
appearsIn: [Episode!]
}
note: ! = non-nullable

17. designbyheart@gmail.com
Schemas and Types
https://graphql.org/learn/schema
Schema stiching - kompozicija više schema u jednu

18. designbyheart@gmail.com
Serving over HTTP
https://graphql.org/learn/serving-over-http
GET request:
POST request:
Response:
{
“data”: { ... }
“errors”: [ ... ]
}
{
“query”: ”...“,
“operationName”: ”...“,
“variables”: { “myVariable": “someValue”,”...“ }
}
http://myapi/graphql?query={me{name}}

19. designbyheart@gmail.com
Demo: Task board
With a spin…
Zahtev klijenta:
Napraviti task dashboard sa projektima
kojima pripadaju i dodeliti ih userima.

20. designbyheart@gmail.com
Demo: Task board - Prep
With a spin…
1. Install Laravel project
2. Composer require folklore/graphql
3. php artisan vendor:publish —
provider="FolkloreGraphQLServiceProvider"
4. Migration files & models: User, Project &
Task
5. Seed data

21. designbyheart@gmail.com
Demo: Task board 3, 2, 1…
With a spin…
And quest / query počinje…

22. designbyheart@gmail.com
Materijali
GraphQL lib: laravel-graphql
Demo project: https://github.com/designbyheart/graphql-with-laravel
GraphQL Dokumentacija: GraphQL Doc
Naredni koraci:
- autorizacija: https://graphql.github.io/learn/authorization/
- caching: https://graphql.org/learn/caching/ https://philsturgeon.uk/api/
2017/01/26/graphql-vs-rest-caching/
- Apollo: https://www.apollographql.com
- Performance: https://medium.com/@gajus/reducing-
graphql-response-size-by-a-lot-ff5ba9dcb60

23. designbyheart@gmail.com
Hvala :)