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

Why GraphQL?

Why GraphQL?

If you don’t know much about GraphQL, you probably just identify it as the hip, shiny new thing companies are adopting to replace their RESTful APIs. Sure, sure – clients can ask for only what they need in a single request – but is that it? What really makes GraphQL so special? In this talk, you’ll be introduced to GraphQL beyond just the usual explanations of the query language and learn why things like GraphQL’s introspection and type system make it an enormous advancement in web technologies.

Chris Arcand

June 14, 2018
Tweet

More Decks by Chris Arcand

Other Decks in Programming

Transcript

  1. Chris Arcand
 chrisarcand chrisarcand www.chrisarcand.com Why GraphQL?

  2. None
  3. Chris Arcand https://chrisarcand.com chrisarcand ✨ ✨

  4. Chris Arcand https://chrisarcand.com chrisarcand

  5. Chris Arcand https://chrisarcand.com chrisarcand

  6. Chris Arcand https://chrisarcand.com chrisarcand Lots of companies are starting to

    adopt GraphQL
  7. Chris Arcand https://chrisarcand.com chrisarcand …why?

  8. Chris Arcand https://chrisarcand.com chrisarcand Examples in this section from Brooks

    Swinnerton’s “Launching GitHub's public GraphQL API”, GitHub Universe 2017 GET https://api.github.com/user
  9. Chris Arcand https://chrisarcand.com chrisarcand GET https://api.github.com/user { "login": "chrisarcand", "databaseId":

    2430490, "name": "Chris Arcand", "company": “Software for Good”, "location": "Minneapolis, MN” … }
  10. Chris Arcand https://chrisarcand.com chrisarcand REST APIs return resources

  11. Chris Arcand https://chrisarcand.com chrisarcand GET https://api.github.com/user { "login": "chrisarcand", "databaseId":

    2430490, "name": "Chris Arcand", "company": "Software for Good", "location": "Minneapolis, MN" …
 "public_repos": "101", "public_gists": "10" }
  12. Chris Arcand https://chrisarcand.com chrisarcand GET https://api.github.com/user { "login": "chrisarcand", "databaseId":

    2430490, "name": "Chris Arcand", "company": "Software for Good", "location": "Minneapolis, MN" …
 "public_repos": "101", "public_gists": "10" }
  13. Chris Arcand https://chrisarcand.com chrisarcand How do we access those other

    resources?
  14. Chris Arcand https://chrisarcand.com chrisarcand ✨ ✨ Hypermedia

  15. Chris Arcand https://chrisarcand.com chrisarcand GET https://api.github.com/user { "login": "chrisarcand", "databaseId":

    2430490, "name": "Chris Arcand", "company": "Software for Good", "location": "Minneapolis, MN"
 "public_repos": "101", "public_gists": "10", "gists_url": "https://api.github.com/users/chrisarcand/gists{/ gist_id}", "repos_url": ... } " " https://api.github.com/users/chrisarcand/repos
  16. Chris Arcand https://chrisarcand.com chrisarcand GET https://api.github.com/users/chrisarcand/repos { "id": 11666784, "name":

    "dotfiles", "owner": { "login": "chrisarcand", "id": 2430490, "url": "https://api.github.com/users/chrisarcand", ... }, "private": false, "description": "Your dotfiles are how you personalize your system. These are mine.", "url": "https://api.github.com/repos/chrisarcand/dotfiles", "issues_url": "https://api.github.com/repos/chrisarcand/dotfiles/issues{/number}", ... }, ...
  17. Chris Arcand https://chrisarcand.com chrisarcand GET https://api.github.com/users/chrisarcand/repos { "id": 11666784, "name":

    "dotfiles", "owner": { "login": "chrisarcand", "id": 2430490, "url": "https://api.github.com/users/chrisarcand", ... }, "private": false, "description": "Your dotfiles are how you personalize your system. These are mine.", "url": "https://api.github.com/repos/chrisarcand/dotfiles", "issues_url": " ", ... }, ... https://api.github.com/repos/chrisarcand/dotfiles/issues{/number}
  18. Chris Arcand https://chrisarcand.com chrisarcand GET https://api.github.com/repos/chrisarcand/dotfiles/issues{/number} [{ "url": "https://api.github.com/repos/chrisarcand/dotfiles/issues/1", "repository_url":

    "https://api.github.com/repos/chrisarcand/dotfiles", "id": 299310940, "title": "git fixdown", "user": { "login": "mnieber", ... }, "state": "open", "comments": 3, "body": "Hi Chris, fyi, I used your git-autofix script as the basis for a variation...", ... }, ... ]
  19. Chris Arcand https://chrisarcand.com chrisarcand Clients Web API /user /repositories /issues

  20. Chris Arcand https://chrisarcand.com chrisarcand Clients Web API /user /repositories /issues

  21. Chris Arcand https://chrisarcand.com chrisarcand ✨ ✨

  22. Chris Arcand https://chrisarcand.com chrisarcand REST APIs return resources

  23. Chris Arcand https://chrisarcand.com chrisarcand GraphQL APIs return only whatever the

    client wants and the server provides, across different related resources
  24. Chris Arcand https://chrisarcand.com chrisarcand { viewer { name email
 }


    }
  25. Chris Arcand https://chrisarcand.com chrisarcand { viewer { name email
 }


    }
  26. Chris Arcand https://chrisarcand.com chrisarcand { viewer { name email
 }


    }
  27. Chris Arcand https://chrisarcand.com chrisarcand POST https://api.github.com/graphql { "data": { "viewer":

    { "name": "Chris Arcand", "email": "[email protected]" } } } { viewer { name email
 }
 }
  28. Chris Arcand https://chrisarcand.com chrisarcand { user(login: "caseyhelbling") { name location


    }
 }
  29. Chris Arcand https://chrisarcand.com chrisarcand { user(login: "caseyhelbling") { name location


    }
 }
  30. Chris Arcand https://chrisarcand.com chrisarcand { user(login: "caseyhelbling") { name location


    }
 } { "data": { "user": { "name": "Casey Helbling", "location": "Minneapolis, MN" } } } POST https://api.github.com/graphql
  31. Chris Arcand https://chrisarcand.com chrisarcand { user(login: "caseyhelbling") { name location


    }
 }
  32. Chris Arcand https://chrisarcand.com chrisarcand { user(login: "caseyhelbling") { name location


    repositories {
 name
 }
 }
 }
  33. Chris Arcand https://chrisarcand.com chrisarcand { "data": { "user": { "name":

    "Casey Helbling", "location": "Minneapolis, MN",
 "repositories": [ { "name": "smartthings" },
 { "name": "recurly-client-ruby" },
 { "name": "bearded-auth" },
 ... } } } { user(login: "caseyhelbling") { name location
 repositories {
 name
 }
 }
 } POST https://api.github.com/graphql
  34. Chris Arcand https://chrisarcand.com chrisarcand FIN

  35. Chris Arcand https://chrisarcand.com chrisarcand …why?

  36. Chris Arcand https://chrisarcand.com chrisarcand GraphQL is typed

  37. Chris Arcand https://chrisarcand.com chrisarcand { viewer { name email
 }


    }
  38. Chris Arcand https://chrisarcand.com chrisarcand type Query { viewer: User }

    type User { name: String email: String } Schema Definition Language (SDL) -or- Interface Definition Language (IDL) { viewer { name email
 }
 }
  39. Chris Arcand https://chrisarcand.com chrisarcand type Query { viewer: User }

    type User { name: String email: String } { viewer { name email
 }
 }
  40. Chris Arcand https://chrisarcand.com chrisarcand type Query { viewer: User }

    type User { name: String email: String } { viewer { name email
 }
 }
  41. Chris Arcand https://chrisarcand.com chrisarcand type Query { viewer: User }

    type User { name: String email: String } { viewer { name email
 }
 }
  42. Chris Arcand https://chrisarcand.com chrisarcand { user(login: "caseyhelbling") { name location


    repositories {
 name
 }
 }
 }
  43. Chris Arcand https://chrisarcand.com chrisarcand { user(login: "caseyhelbling") { name location


    repositories {
 name
 }
 }
 } type Query { user(login: String): User } type User { name: String
 location: String repositories: [Repository] }
 
 type Repository {
 name: String!
 }

  44. Chris Arcand https://chrisarcand.com chrisarcand { user(login: "caseyhelbling") { name location


    repositories {
 name
 }
 }
 } type Query { user(login: String): User } type User { name: String
 location: String repositories: [Repository] }
 
 type Repository {
 name: String!
 }

  45. Chris Arcand https://chrisarcand.com chrisarcand { user(login: "caseyhelbling") { name location


    repositories {
 name
 }
 }
 } type Query { user(login: String): User } type User { name: String
 location: String repositories: [Repository] }
 
 type Repository {
 name: String!
 }

  46. Chris Arcand https://chrisarcand.com chrisarcand { user(login: "caseyhelbling") { name location


    repositories {
 name
 }
 }
 } type Query { user(login: String): User } type User { name: String
 location: String repositories: [Repository] }
 
 type Repository {
 name: String!
 }

  47. Chris Arcand https://chrisarcand.com chrisarcand { user(login: "caseyhelbling") { name location


    repositories {
 name
 }
 }
 } type Query { user(login: String): User } type User { name: String
 location: String repositories: [Repository] }
 
 type Repository {
 name: String!
 }

  48. Chris Arcand https://chrisarcand.com chrisarcand { user(login: "caseyhelbling") { name location


    repositories {
 name
 }
 }
 } type Query { user(login: String): User } type User { name: String
 location: String repositories: [Repository] }
 
 type Repository {
 name: String!
 }

  49. Chris Arcand https://chrisarcand.com chrisarcand aliases

  50. Chris Arcand https://chrisarcand.com chrisarcand { user(login: "caseyhelbling") { name email


    } user(login: "chrisarcand") { name email
 }
 }
  51. Chris Arcand https://chrisarcand.com chrisarcand { user(login: "caseyhelbling") { name email


    } user(login: "chrisarcand") { name email
 }
 } { "data": { "user": { "name": "Casey Helbling", "email": "[email protected]" },
 "user": {
 "name": "Chris Arcand",
 "email: "[email protected]"
 } } }
  52. Chris Arcand https://chrisarcand.com chrisarcand { user(login: "caseyhelbling") { name email


    } user(login: "chrisarcand") { name email
 }
 } { "data": { "user": { "name": "Casey Helbling", "email": "[email protected]" },
 "user": {
 "name": "Chris Arcand",
 "email: "[email protected]"
 } } }
  53. Chris Arcand https://chrisarcand.com chrisarcand { casey: user(login: "caseyhelbling") { name

    email
 } chris: user(login: "chrisarcand") { name email
 }
 }
  54. Chris Arcand https://chrisarcand.com chrisarcand { "data": { "casey": { "name":

    "Casey Helbling", "email": "[email protected]" },
 "chris": {
 "name": "Chris Arcand",
 "email: "[email protected]"
 } } }
  55. Chris Arcand https://chrisarcand.com chrisarcand fragments

  56. Chris Arcand https://chrisarcand.com chrisarcand { casey: user(login: "caseyhelbling") { name

    email
 } chris: user(login: "chrisarcand") { name email
 }
 }
  57. Chris Arcand https://chrisarcand.com chrisarcand { casey: user(login: "caseyhelbling") { ...UserInfo


    } chris: user(login: "chrisarcand") { ...UserInfo
 }
 } fragment UserInfo on User {
 name
 email
 }
  58. Chris Arcand https://chrisarcand.com chrisarcand variables

  59. Chris Arcand https://chrisarcand.com chrisarcand {
 user(login: "chrisarcand") { name email


    }
 }
  60. Chris Arcand https://chrisarcand.com chrisarcand query {
 user(login: "chrisarcand") { name

    email
 }
 }
  61. Chris Arcand https://chrisarcand.com chrisarcand query($login:String!) {
 user(login:$login) { name email


    }
 }
  62. Chris Arcand https://chrisarcand.com chrisarcand query($login:String!) {
 user(login:$login) { name email


    }
 }
 
 {
 "login": "chrisarcand"
 }
  63. Chris Arcand https://chrisarcand.com chrisarcand ...FIN?

  64. Chris Arcand https://chrisarcand.com chrisarcand GraphQL is typed

  65. Chris Arcand https://chrisarcand.com chrisarcand which means
 GraphQL is introspective

  66. Chris Arcand https://chrisarcand.com chrisarcand

  67. Chris Arcand https://chrisarcand.com chrisarcand

  68. Chris Arcand https://chrisarcand.com chrisarcand

  69. Chris Arcand https://chrisarcand.com chrisarcand documentation is free

  70. Chris Arcand https://chrisarcand.com chrisarcand

  71. Chris Arcand https://chrisarcand.com chrisarcand

  72. Chris Arcand https://chrisarcand.com chrisarcand

  73. Chris Arcand https://chrisarcand.com chrisarcand

  74. Chris Arcand https://chrisarcand.com chrisarcand deprecations are built-in

  75. Chris Arcand https://chrisarcand.com chrisarcand

  76. Chris Arcand https://chrisarcand.com chrisarcand GraphQL is versionless

  77. Chris Arcand https://chrisarcand.com chrisarcand • Mutations • More query languages

    features: unions, interfaces, enums • Persisted queries • Front end frameworks/specifications (Relay, Apollo) • Server-side concerns like batch querying, node complexity constraints
  78. www.softwareforgood.com

  79. Thank you! www.softwareforgood.com Chris Arcand
 chrisarcand chrisarcand www.chrisarcand.com