Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Exploring GraphQL

Exploring GraphQL

Marc-Andre Giroux

March 09, 2017
Tweet

More Decks by Marc-Andre Giroux

Other Decks in Programming

Transcript

  1. Exploring GraphQL
    Marc-André Giroux
    @__xuorig__

    View Slide

  2. View Slide

  3. View Slide

  4. View Slide

  5. @__xuorig__
    REST APIs are Great.

    View Slide

  6. @__xuorig__
    Except when they're not.

    View Slide

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

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

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

    View Slide

  16. @__xuorig__
    A library.

    View Slide

  17. @__xuorig__
    A Query Langage.

    View Slide

  18. @__xuorig__
    &

    View Slide

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

    View Slide

  20. @__xuorig__
    A GraphQL Hello World.

    View Slide

  21. @__xuorig__
    query {
    film {
    title
    }
    }

    View Slide

  22. @__xuorig__
    Anatomy of a GraphQL
    Query

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  38. @__xuorig__
    Introspection.

    View Slide

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

    View Slide

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

    View Slide

  41. @__xuorig__
    Introspection == Clients
    with Super Powers

    View Slide

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

    View Slide

  43. @__xuorig__
    GraphiQL

    View Slide

  44. @__xuorig__

    View Slide

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

    View Slide

  46. Mutations

    View Slide

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

    View Slide

  48. Fragments

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  53. @__xuorig__
    Versioning

    View Slide

  54. @__xuorig__
    Versioning
    Continuous Evolution

    View Slide

  55. @__xuorig__
    What about Security ?

    View Slide

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

    View Slide

  57. @__xuorig__
    My HTTP Caching :( !

    View Slide

  58. @__xuorig__
    • Client Side Cache
    • Persisted Queries

    View Slide

  59. @__xuorig__
    GraphQL is Great.

    View Slide

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

    View Slide

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

    View Slide

  62. @__xuorig__
    Servers express possibilities.

    View Slide

  63. @__xuorig__
    Clients define requirements.

    View Slide

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

    View Slide

  65. @__xuorig__
    Great developer experience.

    View Slide

  66. @__xuorig__
    It makes us ship faster.

    View Slide

  67. @__xuorig__
    An everyone is happy.

    View Slide

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

    View Slide