SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our User Agreement and Privacy Policy.
SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our Privacy Policy and User Agreement for details.
Successfully reported this slideshow.
Activate your 14 day free trial to unlock unlimited reading.
REST est devenu un standard pour les APIs web. Mais malgré sa popularité, il est plein de défauts. Son successeur existe et il vient de Facebook. Venez découvrir en détail le principe, la mise en oeuvre et l’écosystème de GraphQL.
REST est devenu un standard pour les APIs web. Mais malgré sa popularité, il est plein de défauts. Son successeur existe et il vient de Facebook. Venez découvrir en détail le principe, la mise en oeuvre et l’écosystème de GraphQL.
7.
R E S T I N P E A C E
• Trop de requêtes par page
• Mauvaise performance sur mobile
• Pas de standard
• Pas de schema
• Evolution impossible
• Actions limitées au CRUD
8.
L E S A U T R E S
C A N D I D AT S
PA R T I E 2 / 6
9.
R E S T + +
GET /tweets?include=author&fields=[id,date,body]
10.
S Q L O V E R H T T P
GET /data?query=
SELECT t.id, t.date,t.body,a.name
FROM tweets t LEFT JOIN author a
ON tweet.author_id = author.id
LIMIT 10
13.
L E S A I N T G R A A L
• Langage de requêtage déclaratif
• Reposant sur du Remote Procedure Call
• Typage fort, schema
• Support des agrégats
• Standardisé
• Non lié à HTTP
14.
D É C O U V R E Z
G R A P H Q L
PA R T I E 3 / 6
15.
POST / HTTP 1.1
Host: http://graphql.acme.com/
Content-Type: application/graphql
{
getTweet(id: 123) { id body date }
}
HTTP/1.1 200 OK
{
"data": {
"getTweet": {
"id": "123",
"body": "Lorem Ipsum",
"date": "2017-07-14"
}
}
}
GET /tweets/123 HTTP 1.1
Host: http://rest.acme.com/
HTTP/1.1 200 OK
{
"id": 123,
"body": "Lorem Ipsum",
"user_id": 456,
"views": 45,
"date": "2017-07-14",
// etc.
}
RequêteRéponse
REST GraphQL
16.
POST / HTTP 1.1
Host: http://graphql.acme.com/
Content-Type: application/graphql
{
getTweets(limit: 10, sortField: "date", sortOrder: "DESC") {
id
body
date
}
getUser {
fullName
}
getNotificationsMeta {
count
}
}
Requête
17.
HTTP/1.1 200 OK
Content-Type: application/json
{
"data": {
"getTweets": [
{
"id": "752",
"body": "The guy next to me is listening...",
"date": "2017-07-15T13:17:42.772Z",
},
{
"id": "123",
"body": "The Espionnage Act was designed to...",
"date": "2017-07-14T12:44:17.449Z"
},
// etc.
],
"getUser": {
"fullName": "John Doe"
},
"getNotificationsMeta": {
"count": 12
}
}
}
Réponse
18.
POST / HTTP 1.1
Host: http://graphql.acme.com/
Content-Type: application/graphql
{
getTweets(limit: 10, sortField: "date", sortOrder: "DESC") {
id
body
date
Author {
username
fullName
avatarUrl
}
Stat {
nbResponses
nbRetweets
nbLikes
}
}
getUser {
fullName
}
getNotificationsMeta {
count
}
}
Requête
19.
POST / HTTP 1.1
Host: http://graphql.acme.com/
Content-Type: application/graphql
{
getTweets(limit: 10, sortField: "date", sortOrder: "DESC") {
id
body
date
Author {
username
fullName
avatarUrl
}
Stat {
nbResponses
nbRetweets
nbLikes
}
}
getUser {
fullName
}
getNotificationsMeta {
count
}
}
Requête
20.
{
"data": {
"getTweets": [
{
"id": "752",
"body": "The guy next to me is listening...",
"date": "2017-07-15T13:17:42.772Z",
"Author": {
"username": "quantian1",
"fullName": "Quantian",
"avatarUrl": "https://amce.com/avatars/34345745634",
},
"Stat": {
"nbResponses": 3
"nbRetweets": 4,
"nbLikes": 40
}
},
// etc.
],
"getUser": {
"fullName": "John Doe"
},
"getNotificationsMeta": {
"count": 12
}
}
}
Réponse
21.
POST / HTTP 1.1
Host: http://graphql.acme.com/
Content-Type: application/graphql
{
getTweets(limit: 10, sortField: "date", sortOrder: "DESC") {
id
body
date
Author {
username
fullName
avatarUrl
}
Stat {
nbResponses
nbRetweets
nbLikes
}
}
getUser {
fullName
}
getNotificationsMeta {
count
}
}
Requête
22.
# entry points
type Query {
getTweet(id: ID!): Tweet
getTweets(limit: Int, sortField: String, sortOrder: String): [Tweet]
getUser: User
getNotificationsMeta: Meta
}
# custom types
type Tweet {
id: ID!
body: String
date: Date
Author: User
Stats: Stat
}
type User {
id: ID!
username: String
firstName: String
lastName: String
fullName: String
name: String @deprecated
23.
# entry points
type Query {
getTweet(id: ID!): Tweet
getTweets(limit: Int, sortField: String, sortOrder: String): [Tweet]
getUser: User
getNotificationsMeta: Meta
}
# custom types
type Tweet {
id: ID!
body: String
date: Date
Author: User
Stats: Stat
}
type User {
id: ID!
username: String
firstName: String
lastName: String
fullName: String
name: String @deprecated
24.
POST / HTTP 1.1
Host: http://graphql.acme.com/
Content-Type: application/graphql
{
getTweets(limit: 10, sortField: "date", sortOrder: "DESC") {
id
body
date(timezone: "UTC +2")
Author {
username
fullName
avatarUrl
TopTweets(limit: 10) {
body
date(timezone: "UTC +2 »)
Stats {
nbResponses
nbRetweets
}
}
}
Stat {
nbResponses
nbRetweets
}
}
}
Requête
25.
L E L A N G A G E
G R A P H Q L
• Types
• Champs
• Requêtes, Mutations, Abonnements
• Variables
• Fragments
• Directives
26.
C O M M E N T
G R A P H Q L
R É P O N D A V O S
D E M A N D E S
PA R T I E 4 / 6
27.
type Query {
getTweet(id: ID!): Tweet
getTweets(limit: Int): [Tweet]
}
type Tweet {
id: ID!
body: String
Author: User
}
type User {
fullName: String
}
34.
AVA I L A B L E I N Y O U R
S E R V E R L A N G U A G E
• JavaScript
• PHP
• Ruby
• Python
• Go
• Java
• Scala
• C#
• Elixir
• Fortran
• BrainFuck
• etc…
37.
AVA I L A B L E I N Y O U R
C L I E N T L A N G U A G E
• Vue.js
• React.js
• Angular.js
• Meteor.js
• Objective-C
• Swift
• Expo
• Java
• Kotlin
• Dart
• Fart
• etc…
38.
T O U T E S T P R Ê T P O U R
V O U S A C C U E I L L I R
• Simple
• Stable
• Sécurisé
• Performant
• Documenté
• Supporté
39.
G R A P H Q L , A N G E
O U D É M O N ?
PA R T I E 5 / 6
41.
POST /graphql 200 OK
POST /graphql 200 OK
POST /graphql 200 OK
POST /graphql 200 OK
POST /graphql 200 OK
POST /graphql 200 OK
POST /graphql 200 OK
POST /graphql 500 Internal Server Error
POST /graphql 200 OK
POST /graphql 200 OK
POST /graphql 200 OK
POST /graphql 500 Internal Server Error
POST /graphql 200 OK
POST /graphql 200 OK
POST /graphql 200 OK
POST /graphql 200 OK
POST /graphql 200 OK
POST /graphql 200 OK
POST /graphql 200 OK
POST /graphql 200 OK
POST /graphql 200 OK
POST /graphql 200 OK
POST /graphql 200 OK
43.
Client Server
query
Client Server
id
Dictionary Dictionary
query id id query
PersistedQueries
44.
G R A P H Q L , C ’ E S T
P O U R Q U I ?
PA R T I E 6 / 6
45.
Q U E L T Y P E D E D E V I C E U T I L I S E N T V O S C L I E N T S ?
Q U E S T I O N # 1
D E S K T O P
M O B I L E
E T / O U D E S K T O P
46.
L A P E R F O R M A N C E C Ô T É C L I E N T
E S T- E L L E I M P O R TA N T E ?
Q U E S T I O N # 2
N O N
O U I
47.
C O M B I E N D E R O U T E S A V O T R E A P I R E S T ?
Q U E S T I O N # 3
5 A U P L U S
A U M O I S 6
48.
Q U E L L E E S T L A D U R É E D E V I E D E V O T R E A P I ?
Q U E S T I O N # 4
A U M O I N S
U N A N Q U E L Q U E S
M O I S
49.
Q U E L E S T L E N I V E A U D E C O M P L E X I T É
D E V O T R E A P I ?
Q U E S T I O N # 5
S I M P L E
C O M P L E X E
50.
S U R L A P L U S C O M P L E X E S D E S PA G E S D U C L I E N T,
C O M B I E N D E P E R S I S T E N C E S S O N T A P P E L E E S ?
Q U E S T I O N # 6
U N
P L U S D E U N
51.
AV E Z - V O U S D E S R È G L E S D E C A C H E C O M P L E X E S ?
Q U E S T I O N # 7
N O N
O U I
52.
C O M M E N T T R AVA I L L E N T V O S É Q U I P E S
F R O N T E T B A C K ?
Q U E S T I O N # 8
B A C K L O G
C O M M U N
S I L O
53.
C O M B I E N D E D É V E L O P P E U R S ( F R O N T + B A C K )
T R AVA I L L E N T AV E C L’ A P I ?
Q U E S T I O N # 9
A U M O I N S
C I N Q
U N À Q U AT R E
54.
Q U E L E S T V O T R E T Y P E D E L A N G A G E P R É F É R É ?
Q U E S T I O N # 1 0
F O RT E M E N T
T Y P É
FA I B L E M E N T
T Y P É
55.
M E R C I ! D E S
Q U E S T I O N S ?
F R A N Ç O I S Z A N I N O T T O
@ f r a n c o i s z