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.
19. 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
20. L E S A U T R E S
C A N D I D AT S
PA R T I E 2 / 6
21. R E S T + +
GET /tweets?include=author&fields=[id,date,body]
23. 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
26. 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
27. D É C O U V R E Z
G R A P H Q L
PA R T I E 3 / 6
28. 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
30. 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
31. 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
32. 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
34. 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
35. {
"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
37. 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
40. # 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
41. # 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
43. 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
44. 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
46. 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
47. type Query {
getTweet(id: ID!): Tweet
getTweets(limit: Int): [Tweet]
}
type Tweet {
id: ID!
body: String
Author: User
}
type User {
fullName: String
}
57. 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…
64. 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…
67. 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é
68. G R A P H Q L , A N G E
O U D É M O N ?
PA R T I E 5 / 6
80. 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
85. 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
87. 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
88. 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
89. 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
90. 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
91. 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
92. 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
93. 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
94. 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
95. 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
96. 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 É
101. 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