Exploring GraphQL

Exploring GraphQL

F34d97ba1bfea0ff5e35a9c198562402?s=128

Marc-Andre Giroux

March 09, 2017
Tweet

Transcript

  1. Exploring GraphQL Marc-André Giroux @__xuorig__

  2. None
  3. None
  4. None
  5. @__xuorig__ REST APIs are Great.

  6. @__xuorig__ Except when they're not.

  7. @__xuorig__ Multiple round-trips are not ideal.

  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__ What do clients even use?

  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__ A special type of database.

  16. @__xuorig__ A library.

  17. @__xuorig__ A Query Langage.

  18. @__xuorig__ &

  19. @__xuorig__ A Spec for servers to execute GraphQL Queries.

  20. @__xuorig__ A GraphQL Hello World.

  21. @__xuorig__ query { film { title } }

  22. @__xuorig__ Anatomy of a GraphQL Query

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

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

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

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

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

  28. @__xuorig__ • Lexed • Parsed • Validated • Executed

  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__ The Type System.

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

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

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

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

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

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

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

  41. @__xuorig__ Introspection == Clients with Super Powers

  42. @__xuorig__ • AutoComplete • Client side validation • IDE Integration

    • Code Generation
  43. @__xuorig__ GraphiQL

  44. @__xuorig__

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

  46. Mutations

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

  48. Fragments

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

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

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

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

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

  54. @__xuorig__ Versioning Continuous Evolution

  55. @__xuorig__ What about Security ?

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

  57. @__xuorig__ My HTTP Caching :( !

  58. @__xuorig__ • Client Side Cache • Persisted Queries

  59. @__xuorig__ GraphQL is Great.

  60. @__xuorig__ A single roundtrip to fetch exactly what a client

    needs.
  61. @__xuorig__ Declarative and predictable. (no more SELECT *)

  62. @__xuorig__ Servers express possibilities.

  63. @__xuorig__ Clients define requirements.

  64. @__xuorig__ That's real separation of concerns!

  65. @__xuorig__ Great developer experience.

  66. @__xuorig__ It makes us ship faster.

  67. @__xuorig__ An everyone is happy.

  68. Thank you! Marc-André Giroux @__xuorig__