Exploring GraphQL

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