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.

Transcript

1. Chris Arcand
 chrisarcand chrisarcand www.chrisarcand.com Why GraphQL?
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": "chris@softwareforgood.com" } } } { 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": "casey@softwareforgood.com" },
 "user": {
 "name": "Chris Arcand",
 "email: "chris@softwareforgood.com"
 } } }
52. Chris Arcand https://chrisarcand.com chrisarcand { user(login: "caseyhelbling") { name email
 } user(login: "chrisarcand") { name email
 }
 } { "data": { "user": { "name": "Casey Helbling", "email": "casey@softwareforgood.com" },
 "user": {
 "name": "Chris Arcand",
 "email: "chris@softwareforgood.com"
 } } }
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": "casey@softwareforgood.com" },
 "chris": {
 "name": "Chris Arcand",
 "email: "chris@softwareforgood.com"
 } } }
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