GraphQL, l'avenir du REST ?

1. G R A P H Q L ,   L’ AV E N I R D U R E S T ? 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

2. G R A P H Q L g r a f k ɥ ɛ l G R A S K A F K A E C U E L L E

3. L E P R O B L È M E PA R T I E 1 / 6

4. R E S T

5. 1. GET /user 2. GET /tweets 3. GET /users?ids=[123,456,789,…] 4. GET /tweet_stats?ids=[123,456,789,…] 5. GET /notifications 6. POST /views

6. B R E A K I N G C H A N G E

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

11. P R O T O C O L B U F F E R S

12. FA L C O R

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

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

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 }

28. const resolvers = { Query: { getTweet: (_, params) => tweets.find(t => t.id == params.id), getTweets: (_, params) => tweets.slice(0, params.limit), }, Tweet: { id: tweet => tweet.id, body: tweet => tweet.body, Author: tweet => users.find(a => a == tweet.author_id), }, User: { fullName: user => `${user.first_name} ${user.last_name}`, }, };

29. { getTweet(id: "1") { id body Author { fullName } } } getTweet: (_, params) => tweets.find(t => t.id == params.id) (null, { id: 1 }) { id: 1, body: 'Lorem Ipsum’, author_id: 10 } 1

30. { getTweet(id: "1") { id body Author { fullName } } } Tweet: { id: tweet => tweet.id, body: tweet => tweet.body, Author: tweet => users.find(a => a == tweet.author_id), } { id: 1, body: 'Lorem Ipsum’, author_id: 10 }1 2

31. { getTweet(id: "1") { id body Author { fullName } } } 1 2 { id: ‘1’, body: 'Lorem Ipsum’, Author: { id: 10, first_name: ‘John', last_name: 'Doe' } } { id: 1, body: 'Lorem Ipsum’, author_id: 10 }

32. { getTweet(id: "1") { id body Author { fullName } } } 1 2 User: { fullName: user => `${user.first_name} ${user.last_name}`, } 3 { id: 1, body: 'Lorem Ipsum’, author_id: 10 } { id: ‘1’, body: 'Lorem Ipsum’, Author: { id: 10, first_name: ‘John', last_name: 'Doe' } }

33. 1 2 { id: ‘1’, body: 'Lorem Ipsum’, Author: {  fullName: ‘John Doe'  } } { id: ‘1’, body: 'Lorem Ipsum’, Author: { id: 10, first_name: ‘John', last_name: 'Doe' } } { id: 1, body: 'Lorem Ipsum’, author_id: 10 } 3 { getTweet(id: "1") { id body Author { fullName } } }

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…

35. const query = ` { getTweet(id: "1") { id body Author { name } } }`; const headers = new Headers(); myHeaders.append('Content-Type', 'application/graphql'); fetch(‘/graphql’, { method: 'POST', body: query, headers }); .then(response => response.json) .then(response => response.data.getTweet) .then(tweet => ...);

36. import React from 'react'; import { gql, graphql } from 'react-apollo'; import LinearProgress from 'material-ui'; const Tweet = ({ data: { loading, tweet } }) => ( <div> {loading ? ( <LinearProgress /> ) : ( <div> <img src={tweet.author.avatar} className="avatar" /> <span className="author">{tweet.Author.name}</span> <div className="body">{tweet.body}</div> </div> )} </div> ); const query = gql`{ getTweet(id: "1") { id body Author { name } } }`; export default graphql(query)(App);

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

40. #diversité

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

42. { Tweets(limit: 100) { Author { Tweets(limit: 100) { Author { Tweets(limit: 100) { Author { Tweets(limit: 100) { Author { name } } } } } } } } }

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

GraphQL, l'avenir du REST ?

Francois Zaninotto

GraphQL, l'avenir du REST ?