GraphQL à Shopify

Transcript

1. GraphQL @ Shopify
   Marc-André Giroux
   @__xuorig__
   

   View Slide

2. View Slide

3. View Slide

4. View Slide

5. @__xuorig__
   Les APIs REST sont
   

   View Slide

6. @__xuorig__
   Sauf quand ils sont
   

   View Slide

7. @__xuorig__
   Des allers-retours multiples...
   C'est pas idéal.
   

   View Slide

8. @__xuorig__
   GET /people/1
   GET /planet/2
   GET /film/3
   

   View Slide

9. @__xuorig__
   SELECT * FROM
   /ENDPOINT
   

   View Slide

10. @__xuorig__
    GET /people/1
    { "person": { "name": "luke" } }
    

    View Slide

11. @__xuorig__
    {
    "name": "Luke Skywalker",
    "height": "172",
    "mass": "77",
    "hair_color": "blond",
    "skin_color": "fair",
    "eye_color": "blue",
    "birth_year": "19BBY",
    "gender": "male",
    "homeworld": "http://swapi.co/api/
    planets/1/",
    "films": [
    "http://swapi.co/api/films/6/",
    "http://swapi.co/api/films/3/",
    "http://swapi.co/api/films/2/",
    "http://swapi.co/api/films/1/",
    "http://swapi.co/api/films/7/"
    ],
    

    View Slide

12. @__xuorig__
    Qu'est-ce que nos clients
    utilisent vraiment?
    

    View Slide

13. @__xuorig__
    {
    "name": "Luke Skywalker",
    "height": "172",
    "mass": "77",
    "hair_color": "blond",
    "skin_color": "fair",
    "eye_color": "blue",
    "birth_year": "19BBY",
    "gender": "male",
    "homeworld": "http://swapi.co/api/
    planets/1/",
    "films": [
    "http://swapi.co/api/films/6/",
    "http://swapi.co/api/films/3/",
    "http://swapi.co/api/films/2/",
    "http://swapi.co/api/films/1/",
    "http://swapi.co/api/films/7/"
    ],
    

    View Slide

14. GraphQL
    

    View Slide

15. @__xuorig__
    Un type spécial de
    base de données.
    

    View Slide

16. @__xuorig__
    Une
    librairie ou un framework
    

    View Slide

17. @__xuorig__
    Pas spécifique à un langage.
    

    View Slide

18. @__xuorig__
    Langage de requête
    

    View Slide

19. @__xuorig__
    &
    

    View Slide

20. @__xuorig__
    Une Specification.
    

    View Slide

21. @__xuorig__
    Un "Hello World" GraphQL
    

    View Slide

22. @__xuorig__
    query {
    film {
    title
    }
    }
    

    View Slide

23. @__xuorig__
    Anatomie d'une requête GraphQL.
    

    View Slide

24. @__xuorig__
    query MyQuery {
    film {
    title
    }
    }
    

    View Slide

25. @__xuorig__
    query MyQuery {
    film {
    title
    }
    }
    Operation Type
    

    View Slide

26. @__xuorig__
    query MyQuery {
    film {
    title
    }
    }
    Operation Name
    

    View Slide

27. @__xuorig__
    query MyQuery {
    film {
    title
    }
    }
    Selection Set
    

    View Slide

28. @__xuorig__
    query MyQuery {
    film {
    title
    }
    }
    Field
    

    View Slide

29. @__xuorig__
    "data": {
    "film": {
    "title": "A New Hope"
    }
    }
    

    View Slide

30. @__xuorig__
    query {
    film(id: "123") {
    title
    }
    }
    

    View Slide

31. @__xuorig__
    query {
    film(id: "123") {
    title
    characters {
    name
    }
    }
    }
    

    View Slide

32. @__xuorig__
    "data": {
    "film": {
    "title": "A New Hope",
    "characters": [
    { "name": "Luke Skywalker" },
    { "name": "Princess Leia" }
    ]
    }
    }
    

    View Slide

33. @__xuorig__
    query MyQuery { film { title } }
    

    View Slide

34. @__xuorig__
    curl -X POST -d '{"query": "query MyQuery { film { title } }"}' http://
    mongraphql.com/api --header "Content-Type:application/json"
    

    View Slide

35. @__xuorig__
    curl -X POST -d '{"query": "query MyQuery { film { title } }"}' http://
    mongraphql.com/api --header "Content-Type:application/json"
    

    View Slide

36. @__xuorig__
    {
    film(id: "123") {
    title
    characters {
    name
    }
    }
    }
    

    View Slide

37. @__xuorig__
    Query
    film
    title
    characters
    name
    

    View Slide

38. @__xuorig__
    Le Type System.
    

    View Slide

39. @__xuorig__
    {
    film(id: "123") {
    title
    characters {
    name
    }
    }
    }
    

    View Slide

40. @__xuorig__
    {
    film(id: "123") {
    title
    characters {
    name
    }
    }
    }
    type QueryRoot {
    film(id: ID!): Film
    }
    

    View Slide

41. @__xuorig__
    {
    film(id: "123") {
    title
    characters {
    name
    }
    }
    }
    type Film {
    title: String!
    characters: [Character!]!
    }
    

    View Slide

42. @__xuorig__
    {
    film(id: "123") {
    title
    characters {
    name
    }
    }
    }
    type Character {
    name: String!
    }
    

    View Slide

43. @__xuorig__
    Introspection.
    

    View Slide

44. @__xuorig__
    {
    __schema {
    types {
    name
    }
    }
    }
    

    View Slide

45. @__xuorig__
    {
    __type(name: "Film") {
    name
    description
    }
    }
    

    View Slide

46. @__xuorig__
    Introspection == Des clients
    avec des super pouvoirs!
    

    View Slide

47. @__xuorig__
    • AutoSaisie
    • Validation côté client.
    • Intégration dans nos IDE.
    • Génération de code.
    

    View Slide

48. @__xuorig__
    GraphiQL
    

    View Slide

49. @__xuorig__
    

    View Slide

50. @__xuorig__
    swapi-graphql-ruby.herokuapp.com
    

    View Slide

51. Mutations
    

    View Slide

52. @__xuorig__
    mutation {
    addFilm(name: "StarWars 8") {
    title
    }
    }
    

    View Slide

53. Fragments
    

    View Slide

54. @__xuorig__
    query {
    film(id: "123") {
    title
    characters {
    name
    }
    }
    bestRatedfilm {
    title
    characters {
    name
    }
    }
    }
    

    View Slide

55. @__xuorig__
    query {
    film(id: "123") {
    title
    characters {
    name
    }
    }
    bestRatedfilm {
    title
    characters {
    name
    }
    }
    }
    

    View Slide

56. @__xuorig__
    fragment filmFragment on Film {
    title
    characters {
    name
    }
    }
    

    View Slide

57. @__xuorig__
    query {
    film(id: "123") {
    ...filmFragment
    }
    bestRatedfilm {
    ...filmFragment
    }
    }
    fragment filmFragment on Film {
    title
    characters {
    name
    }
    }
    

    View Slide

58. @__xuorig__
    Gestion des versions.
    

    View Slide

59. @__xuorig__
    Versioning
    Continuous Evolution
    

    View Slide

60. @__xuorig__
    Sécurité?
    

    View Slide

61. @__xuorig__
    • Maximum Depth
    • Query Complexity
    • Timeout
    

    View Slide

62. @__xuorig__
    Je perds ma cache HTTP? ;(
    

    View Slide

63. @__xuorig__
    POST /graphql
    

    View Slide

64. @__xuorig__
    • Cache côté client
    • Requête persistées
    

    View Slide

65. @__xuorig__
    Requêtes persistées
    

    View Slide

66. @__xuorig__
    Requêtes persistées
    query MyQuery { film { title } }
    Yo. c'est possible que j'utilise
    cette requête plus tard!
    

    View Slide

67. @__xuorig__
    Requêtes persistées
    Cool pas de prob, envoie moi
    "abcd" et je l'exécuterai pour toi
    

    View Slide

68. @__xuorig__
    Requêtes persistées
    J'ai besoin de "abcd"!
    

    View Slide

69. @__xuorig__
    Requêtes persistées
    "data": {
    "film": {
    "title": "A New Hope"
    }
    }
    

    View Slide

70. @__xuorig__
    GraphQL @ Shopify
    

    View Slide

71. @__xuorig__
    Définir les types
    module GraphApi
    class Shop < GraphApi::ObjectType
    field :name, :string
    field :currency, :string, null: false
    field :products, [Product],
    resolve: ->(shop, _, _) { shop.products }
    end
    end
    

    View Slide

72. @__xuorig__
    type Shop {
    name: String
    currency: String!
    products: [Product!]
    }
    

    View Slide

73. @__xuorig__
    • Client Side Cache
    • Persisted Queries
    Le Schema est "Checked In"
    

    View Slide

74. @__xuorig__
    Et doit toujours être régénéré!
    

    View Slide

75. @__xuorig__
    On prévient les "breaking changes"
    

    View Slide

76. @__xuorig__
    Et on force les bonnes pratiques!
    

    View Slide

77. @__xuorig__
    GraphQL est
    

    View Slide

78. @__xuorig__
    A Un seul allez-retour
    pour récupérer tout
    se qu'un client à
    besoin.
    

    View Slide

79. @__xuorig__
    Declaratif et predictible.
    (plus besoin de notre fameux SELECT *)
    

    View Slide

80. @__xuorig__
    Le serveur exprime les
    possibilités.
    

    View Slide

81. @__xuorig__
    Les clients définissent leurs
    besoins.
    

    View Slide

82. @__xuorig__
    separation of concerns!
    

    View Slide

83. @__xuorig__
    DX
    

    View Slide

84. @__xuorig__
    DX (Developer Experience)
    

    View Slide

85. @__xuorig__
    On "ship" plus rapidement
    

    View Slide

86. @__xuorig__
    Et tout le monde est heureux.
    

    View Slide

87. Merci!
    Marc-André Giroux
    @__xuorig__
    

    View Slide