GraphQL à Shopify

GraphQL à Shopify

F34d97ba1bfea0ff5e35a9c198562402?s=128

Marc-Andre Giroux

April 05, 2017
Tweet

Transcript

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

  2. None
  3. None
  4. None
  5. @__xuorig__ Les APIs REST sont

  6. @__xuorig__ Sauf quand ils sont

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

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

  9. @__xuorig__ SELECT * FROM /ENDPOINT

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

  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/" ],
  12. @__xuorig__ Qu'est-ce que nos clients utilisent vraiment?

  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/" ],
  14. GraphQL

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

  16. @__xuorig__ Une librairie ou un framework

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

  18. @__xuorig__ Langage de requête

  19. @__xuorig__ &

  20. @__xuorig__ Une Specification.

  21. @__xuorig__ Un "Hello World" GraphQL

  22. @__xuorig__ query { film { title } }

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

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

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

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

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

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

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

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

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

    } } }
  32. @__xuorig__ "data": { "film": { "title": "A New Hope", "characters":

    [ { "name": "Luke Skywalker" }, { "name": "Princess Leia" } ] } }
  33. @__xuorig__ query MyQuery { film { title } }

  34. @__xuorig__ curl -X POST -d '{"query": "query MyQuery { film

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

    { title } }"}' http:// mongraphql.com/api --header "Content-Type:application/json"
  36. @__xuorig__ { film(id: "123") { title characters { name }

    } }
  37. @__xuorig__ Query film title characters name

  38. @__xuorig__ Le Type System.

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

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

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

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

    } } type Character { name: String! }
  43. @__xuorig__ Introspection.

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

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

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

  47. @__xuorig__ • AutoSaisie • Validation côté client. • Intégration dans

    nos IDE. • Génération de code.
  48. @__xuorig__ GraphiQL

  49. @__xuorig__

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

  51. Mutations

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

  53. Fragments

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

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

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

    } }
  57. @__xuorig__ query { film(id: "123") { ...filmFragment } bestRatedfilm {

    ...filmFragment } } fragment filmFragment on Film { title characters { name } }
  58. @__xuorig__ Gestion des versions.

  59. @__xuorig__ Versioning Continuous Evolution

  60. @__xuorig__ Sécurité?

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

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

  63. @__xuorig__ POST /graphql

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

  65. @__xuorig__ Requêtes persistées

  66. @__xuorig__ Requêtes persistées query MyQuery { film { title }

    } Yo. c'est possible que j'utilise cette requête plus tard!
  67. @__xuorig__ Requêtes persistées Cool pas de prob, envoie moi "abcd"

    et je l'exécuterai pour toi
  68. @__xuorig__ Requêtes persistées J'ai besoin de "abcd"!

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

    Hope" } }
  70. @__xuorig__ GraphQL @ Shopify

  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
  72. @__xuorig__ type Shop { name: String currency: String! products: [Product!]

    }
  73. @__xuorig__ • Client Side Cache • Persisted Queries Le Schema

    est "Checked In"
  74. @__xuorig__ Et doit toujours être régénéré!

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

  76. @__xuorig__ Et on force les bonnes pratiques!

  77. @__xuorig__ GraphQL est

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

    client à besoin.
  79. @__xuorig__ Declaratif et predictible. (plus besoin de notre fameux SELECT

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

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

  82. @__xuorig__ separation of concerns!

  83. @__xuorig__ DX

  84. @__xuorig__ DX (Developer Experience)

  85. @__xuorig__ On "ship" plus rapidement

  86. @__xuorig__ Et tout le monde est heureux.

  87. Merci! Marc-André Giroux @__xuorig__