Getting a Grip on GraphQL

A presentation at Droidcon Berlin 2018 in June 2018 in Berlin, Germany by Annyce Davis

Slide 1

@BRWNGRLDEV

Slide 2

@BRWNGRLDEV 2013-2014

Slide 3

@BRWNGRLDEV U.S.A

Slide 4

@BRWNGRLDEV 891 TIMES

Slide 5

GETTING A GRIP ON GRAPHQL @BRWNGRLDEV

Slide 6

@BRWNGRLDEV AGENDA

Slide 7

@BRWNGRLDEV Basics AGENDA

Slide 8

@BRWNGRLDEV Basics Server AGENDA

Slide 9

@BRWNGRLDEV Basics Server Client AGENDA

Slide 10

BASICS @BRWNGRLDEV

Slide 11

@BRWNGRLDEV GraphQL is… A QUERY LANGUAGE FOR YOUR API

Slide 12

@BRWNGRLDEV SELECT name FROM users

Slide 13

@BRWNGRLDEV SELECT name FROM users

Slide 14

@BRWNGRLDEV SELECT name FROM users

Slide 15

@BRWNGRLDEV Karen Aisha James SELECT name FROM users

Slide 16

@BRWNGRLDEV data class UFOSighting( var id: Int , var date: LocalDate , var city: String? , var state: String? , var country: String? , var shape: String? , var duration: Double , var comments: String? , var latitude: Double , var longitude: Double

)

Slide 17

@BRWNGRLDEV query AllSightings { sightings

{ id shape

} }

Slide 18

@BRWNGRLDEV query AllSightings { sightings

{ id shape

} }

Slide 19

@BRWNGRLDEV query AllSightings { sightings

{ id shape

} }

Slide 20

@BRWNGRLDEV query AllSightings { sightings

{ id shape

} }

Slide 21

@BRWNGRLDEV query AllSightings { sightings

{ id shape

} }

Slide 22

@BRWNGRLDEV query AllSightings { sightings

{ id shape

} } API

Slide 23

@BRWNGRLDEV query AllSightings {

sightings { id shape

} } { 8

“data” : { “sightings” : [ { 8

    “id” : 1, 
    “shape” : “circle” 
  }

8

8

} 8

} 8 API

Slide 24

@BRWNGRLDEV { 8

“ data ” : { “sightings” : [ { 8

    “id” : 1, 
    “shape” : “circle” 
  }

8

8

} 8

} 8

Slide 25

@BRWNGRLDEV { “data” : { “sightings” : [ { “id” : 1, “shape” : “circle” } ] } }

Slide 26

@BRWNGRLDEV query

Slide 27

@BRWNGRLDEV GET query

Slide 28

@BRWNGRLDEV GET query mutation POST PUT PATCH DELETE

Slide 29

@BRWNGRLDEV BLOG

Slide 30

@BRWNGRLDEV User BLOG

Slide 31

@BRWNGRLDEV User Post BLOG

Slide 32

@BRWNGRLDEV User Post Comment BLOG

Slide 33

@BRWNGRLDEV BLOG User Post Comment

Slide 34

@BRWNGRLDEV GraphQL is… A SPECIFICATION

Slide 35

@BRWNGRLDEV

Slide 36

@BRWNGRLDEV Give me   some data!

Slide 37

@BRWNGRLDEV You didn’t   say please!

Slide 38

@BRWNGRLDEV C# / .NET Elixir Kotlin Java JavaScript Ruby … Server

Slide 39

@BRWNGRLDEV C# / .NET Go Java / Android JavaScript Python Swift … Client

Slide 40

@BRWNGRLDEV GraphQL is… INTROSPECTIVE

Slide 41

@BRWNGRLDEV query { __type(name: "UFOSighting") { fields { name } } }

Slide 42

@BRWNGRLDEV query {

__type (name: "UFOSighting") { fields { name } } }

Slide 43

@BRWNGRLDEV query { __type(name: "UFOSighting") { fields { name } } }

Slide 44

@BRWNGRLDEV

Slide 45

@BRWNGRLDEV GraphQL is… a query language a specification introspective

Slide 46

@BRWNGRLDEV SO WHAT?!

Slide 47

@BRWNGRLDEV R E S T

Slide 48

@BRWNGRLDEV R E S T /UFO-SIGHTINGS [ { "ID": 9298, "LONGITUDE": 145.722595, "LATITUDE": -38.626591, "STATE": "", "COUNTRY": "AU", "SHAPE": "LIGHT", "COMMENTS": "BRIGHT ORANGE LIGHT” }, { "ID": 9297, "LONGITUDE": -90.0488889, "LATITUDE": 35.1494444, "STATE": "TN", "COUNTRY": "US", "SHAPE": "RECTANGLE", "COMMENTS": "STANDING AT MY WINDOW” }, { "ID": 9287, "LONGITUDE": -3.1, "LATITUDE": 53.316667, "STATE": "YT", "COUNTRY": "GB", "SHAPE": "TRIANGLE", "COMMENTS": "((HOAX??)) LONG TRIANGLE OBJECT” }, …

Slide 49

@BRWNGRLDEV R E S T G R A P H Q L

Slide 50

@BRWNGRLDEV

Slide 51

@BRWNGRLDEV

Slide 52

@BRWNGRLDEV

Slide 53

SERVER @BRWNGRLDEV

Slide 54

@BRWNGRLDEV Single Endpoint /graphql

Slide 55

@BRWNGRLDEV HTTP GET

/GRAPHQL?QUERY= <QUERY>

Slide 56

@BRWNGRLDEV

HTTP GET

/GRAPHQL?QUERY= <QUERY> “{

sightings { id shape

} }”

Slide 57

@BRWNGRLDEV HTTP POST

/GRAPHQL

Slide 58

@BRWNGRLDEV {

“query” : “{ sightings

{ id shape

} }” } HTTP POST

/GRAPHQL

Slide 59

@BRWNGRLDEV Postman

Slide 60

@BRWNGRLDEV Postman

Slide 61

@BRWNGRLDEV BUILDING OUR SERVER

Slide 62

@BRWNGRLDEV Ktor – Server Framework

Slide 63

@BRWNGRLDEV Ktor – Server Framework Koin – Dependency Injection

Slide 64

@BRWNGRLDEV Ktor – Server Framework Koin – Dependency Injection Squash – Database Access

Slide 65

@BRWNGRLDEV Ktor – Server Framework Koin – Dependency Injection Squash – Database Access KGraphQL – GraphQL Support

Slide 66

@BRWNGRLDEV GraphQL Server… Types Schema Resolvers

Slide 67

@BRWNGRLDEV C S S H N A S V Z U Y C J H M
N I W P X O D C B Q Q G L F T
C P B U H Z I B A U M A Q S V
Q O W G Y F M T E L M A H F H
R E V L O S E R A E A T P I R
K F S R R S Y N H T P R A E J
O B J E C T S C U L U D R L P
E P Y T L O S X L U B M G D X

Slide 68

@BRWNGRLDEV C S S H N A S V Z U Y C J H M
N I W P X O D C B Q Q G L F T
C P B U H Z I B A U M A Q S V
Q O W G Y F M T E L M A H F H
R E V L O S E R A E A T P I R
K F S R R S Y N H T P R A E J
O B J E C T S C U L U D R L P
E P Y T L O S X L U B M G D X

Slide 69

@BRWNGRLDEV type UFOSighting {

id: Int! city: String

}

Slide 70

@BRWNGRLDEV type UFOSighting {

id: Int! city: String

}

Slide 71

@BRWNGRLDEV type UFOSighting {

id: Int! city: String

} { sightings

{ id { ???
} city } }

Slide 72

@BRWNGRLDEV type UFOSighting {

id: Int! city: String

} { sightings

{ id { ???
} city } } WRONG!

Slide 73

@BRWNGRLDEV type <UFOSighting>

Slide 74

@BRWNGRLDEV type<UFOSighting> data class UFOSighting( var id: Int = -1, var city: String? = "", )

Slide 75

@BRWNGRLDEV type<UFOSighting> data class UFOSighting( var id: Int = -1, var city: String? = "", )

Slide 76

@BRWNGRLDEV type <UFOSighting> data class UFOSighting( var id: Int = -1, var city: String? = "", ) type UFOSighting {

id: Int! city: String

}

Slide 77

@BRWNGRLDEV C S S H N A S V Z U Y C J H M
N I W P X O D C B Q Q G L F T
C P B U H Z I B A U M A Q S V
Q O W G Y F M T E L M A H F H
R E V L O S E R A E A T P I R
K F S R R S Y N H T P R A E J
O B J E C T S C U L U D R L P
E P Y T L O S X L U B M G D X

Slide 78

@BRWNGRLDEV schema {

query: Query

}

Slide 79

@BRWNGRLDEV type Query {

sighting (id: Int) :

UFOSighting

} schema { query: Query }

Slide 80

@BRWNGRLDEV type UFOSighting {

id: Int! city: String

} type Query {

sighting(id: Int): UFOSighting

} schema { query: Query }

Slide 81

@BRWNGRLDEV Data,   please! Why, yes!

Slide 82

@BRWNGRLDEV KGraphQL. schema {

}

Slide 83

@BRWNGRLDEV KGraphQL.schema {

type <UFOSighting> }

Slide 84

@BRWNGRLDEV KGraphQL.schema {

type <UFOSighting>

query ( "sighting" ) { resolver { id: Int -> …} } }

Slide 85

@BRWNGRLDEV C S S H N A S V Z U Y C J H M
N I W P X O D C B Q Q G L F T
C P B U H Z I B A U M A Q S V
Q O W G Y F M T E L M A H F H
R E V L O S E R A E A T P I R
K F S R R S Y N H T P R A E J
O B J E C T S C U L U D R L P
E P Y T L O S X L U B M G D X

Slide 86

@BRWNGRLDEV Resolver query ("sighting") { 3

resolver { 3 id: Int ->

storage .getSighting(id) } 3

} 3

Slide 87

@BRWNGRLDEV Resolver query ("sighting") { 3 resolver { 3 id: Int ->

“http://sightings/ $id " .httpGet()

} 3

} 3

Slide 88

@BRWNGRLDEV { sighting(id: 45) { id shape user { id name } } }

Slide 89

@BRWNGRLDEV { sighting(id: 45) {

id shape user { id name } } } Root Query sighting

Slide 90

@BRWNGRLDEV { sighting(id: 45) { id shape user { id name } } } Root Query sighting 345 circle

Slide 91

@BRWNGRLDEV { sighting(id: 45) { id shape user { id name } } } Root Query sighting 345 circle user 24 Shuri

Slide 92

@BRWNGRLDEV mutation ( "createUFOSighting" ) { description = "Adds a new UFO Sighting”

} 3 Resolver - Mutation

Slide 93

@BRWNGRLDEV Resolver - Mutation mutation("createUFOSighting") { description = "Adds a new UFO Sighting” resolver { input: CreateUFOSightingInput ->

storage .createSighting(input…) } } 3

Slide 94

@BRWNGRLDEV Resolver - schema.json

Slide 95

@BRWNGRLDEV /graphql Endpoint fun Route .graphql(…) {

post <GraphQLRequest> { val request = call.receive<GraphQLRequest>() val query = request.query val variables = gson.toJson(request.variables) val result = schema. execute (query, variables) call.respondText(result) } }

Slide 96

@BRWNGRLDEV /graphql Endpoint fun Route.graphql(…) { post<GraphQLRequest> { val request = call.receive<GraphQLRequest>() val query = request.query val variables = gson.toJson(request.variables) val result = schema.execute(query, variables) call.respondText(result) } }

Slide 97

@BRWNGRLDEV schema resolvers /graphql

Slide 98

CLIENT @BRWNGRLDEV

Slide 99

@BRWNGRLDEV Sample Application

Slide 100

@BRWNGRLDEV Sample Application KOTLIN

Slide 101

@BRWNGRLDEV Sample Application KOTLIN ARCHITECTURE COMPONENTS

Slide 102

@BRWNGRLDEV Sample Application KOTLIN ARCHITECTURE COMPONENTS APOLLO ANDROID

Slide 103

@BRWNGRLDEV GraphQL Client… Apollo Client Schema .graphql Files

Slide 104

@BRWNGRLDEV Apollo Client ApolloClient.builder() . serverUrl ( BASE_URL ) . okHttpClient ( okHttpClient ) .build()

Slide 105

@BRWNGRLDEV Apollo Client ApolloClient.builder() .serverUrl(BASE_URL) .okHttpClient(okHttpClient)

.build()

Slide 106

@BRWNGRLDEV apollo-codegen download-schema

Slide 107

@BRWNGRLDEV Schema

Slide 108

@BRWNGRLDEV .graphql File

Slide 109

@BRWNGRLDEV .graphql File

Slide 110

@BRWNGRLDEV .graphql File Plugin

Slide 111

@BRWNGRLDEV .graphql File Plugin

Slide 112

@BRWNGRLDEV

Slide 113

@BRWNGRLDEV Generated Code…

Slide 114

@BRWNGRLDEV Apollo Client Schema .graphql Files

Slide 115

@BRWNGRLDEV 1. Build our query 2. Enqueue the request 3. Handle the response

Slide 116

@BRWNGRLDEV SightingsQuery.builder() .size( 30 ) .build() Build our query

Slide 117

@BRWNGRLDEV apolloClient .query( query ) Enqueue the request

Slide 118

@BRWNGRLDEV apolloClient .query(query) .enqueue(object : Callback<T>() { }) Enqueue the request

Slide 119

@BRWNGRLDEV apolloClient .query(query) .enqueue(object : Callback<T>() { fun onResponse (response: Response<T>) fun onFailure (e: ApolloException) }) Enqueue the request

Slide 120

@BRWNGRLDEV Handle the response {

"data" : {

"sightings" : [ { "__typename" : "UFOSighting", "id" : 9297, "date" : "2014-05-08", "shape" : "rectangle", "comments" : "Standing at my window one by one." } ] } }

Slide 121

@BRWNGRLDEV Handle the response fun onResponse (response: Response<T>) { response. data ()?. sightings ()

// notify your UI

}

Slide 122

@BRWNGRLDEV

Slide 123

TIPS & TRICKS @BRWNGRLDEV

Slide 124

@BRWNGRLDEV IntelliJ GraphQL Plugin…

Slide 125

@BRWNGRLDEV A CLIENT IS OPTIONAL

Slide 126

@BRWNGRLDEV HTTPS://GITHUB.COM/APIS-GURU/GRAPHQL-APIS

Slide 127

@BRWNGRLDEV HTTPS://GITHUB.COM/SOGKO/GRAPHQL-SCHEMA-LANGUAGE-CHEAT-SHEET

Slide 128

@BRWNGRLDEV TRUE / FALSE RAPID

FIRE @BRWNGRLDEV

Slide 129

@BRWNGRLDEV GRAPHQL WAS DESIGNED FOR GRAPH DATABASES. @BRWNGRLDEV

Slide 130

@BRWNGRLDEV GRAPHQL WAS DESIGNED FOR GRAPH DATABASES. FALSE @BRWNGRLDEV

Slide 131

@BRWNGRLDEV GRAPHQL IS LANGUAGE AGNOSTIC. @BRWNGRLDEV

Slide 132

@BRWNGRLDEV GRAPHQL IS LANGUAGE AGNOSTIC. TRUE @BRWNGRLDEV

Slide 133

@BRWNGRLDEV APOLLO ANDROID IS THE ONLY GRAPHQL CLIENT. @BRWNGRLDEV

Slide 134

@BRWNGRLDEV APOLLO ANDROID IS THE ONLY GRAPHQL CLIENT. FALSE @BRWNGRLDEV

Slide 135

@BRWNGRLDEV REST IS DEAD. @BRWNGRLDEV

Slide 136

@BRWNGRLDEV YOU DECIDE @BRWNGRLDEV

Slide 137

GETTING A GRIP ON GRAPHQL @BRWNGRLDEV

Slide 138

ADAVIS.INFO