Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Chris Arcand https://chrisarcand.com chrisarcand

Slide 5

Slide 5 text

Chris Arcand https://chrisarcand.com chrisarcand

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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” … }

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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" }

Slide 12

Slide 12 text

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" }

Slide 13

Slide 13 text

Chris Arcand https://chrisarcand.com chrisarcand How do we access those other resources?

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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}", ... }, ...

Slide 17

Slide 17 text

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}

Slide 18

Slide 18 text

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...", ... }, ... ]

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Chris Arcand https://chrisarcand.com chrisarcand GraphQL APIs return only whatever the client wants and the server provides, across different related resources

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

Chris Arcand https://chrisarcand.com chrisarcand POST https://api.github.com/graphql { "data": { "viewer": { "name": "Chris Arcand", "email": "[email protected]" } } } { viewer { name email
 }
 }

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

Chris Arcand https://chrisarcand.com chrisarcand FIN

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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
 }
 }

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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!
 }


Slide 44

Slide 44 text

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!
 }


Slide 45

Slide 45 text

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!
 }


Slide 46

Slide 46 text

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!
 }


Slide 47

Slide 47 text

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!
 }


Slide 48

Slide 48 text

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!
 }


Slide 49

Slide 49 text

Chris Arcand https://chrisarcand.com chrisarcand aliases

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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]"
 } } }

Slide 52

Slide 52 text

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]"
 } } }

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

Chris Arcand https://chrisarcand.com chrisarcand fragments

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

Chris Arcand https://chrisarcand.com chrisarcand variables

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

Chris Arcand https://chrisarcand.com chrisarcand ...FIN?

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

Chris Arcand https://chrisarcand.com chrisarcand

Slide 67

Slide 67 text

Chris Arcand https://chrisarcand.com chrisarcand

Slide 68

Slide 68 text

Chris Arcand https://chrisarcand.com chrisarcand

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

Chris Arcand https://chrisarcand.com chrisarcand

Slide 71

Slide 71 text

Chris Arcand https://chrisarcand.com chrisarcand

Slide 72

Slide 72 text

Chris Arcand https://chrisarcand.com chrisarcand

Slide 73

Slide 73 text

Chris Arcand https://chrisarcand.com chrisarcand

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

Chris Arcand https://chrisarcand.com chrisarcand

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

www.softwareforgood.com

Slide 79

Slide 79 text

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