@BRWNGRLDEV

@BRWNGRLDEV 2013-2014

@BRWNGRLDEV U.S.A

@BRWNGRLDEV 891 TIMES

GETTING A GRIP ON GRAPHQL @BRWNGRLDEV

@BRWNGRLDEV AGENDA

@BRWNGRLDEV Basics AGENDA

@BRWNGRLDEV Basics Server AGENDA

@BRWNGRLDEV Basics Server Client AGENDA

BASICS @BRWNGRLDEV

@BRWNGRLDEV GraphQL is… A QUERY LANGUAGE FOR YOUR API

@BRWNGRLDEV SELECT name FROM users

@BRWNGRLDEV SELECT name FROM users

@BRWNGRLDEV SELECT name FROM users

@BRWNGRLDEV Karen Aisha James SELECT name FROM users

@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

)

@BRWNGRLDEV query AllSightings { sightings

{ id shape

} }

@BRWNGRLDEV query AllSightings { sightings

{ id shape

} }

@BRWNGRLDEV query AllSightings { sightings

{ id shape

} }

@BRWNGRLDEV query AllSightings { sightings

{ id shape

} }

@BRWNGRLDEV query AllSightings { sightings

{ id shape

} }

@BRWNGRLDEV query AllSightings { sightings

{ id shape

} } API

@BRWNGRLDEV query AllSightings {

sightings { id shape

} } { 8

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

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

8

]

8

} 8

} 8 API

@BRWNGRLDEV { 8

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

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

8

]

8

} 8

} 8

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

@BRWNGRLDEV query

@BRWNGRLDEV GET query

@BRWNGRLDEV GET query mutation POST PUT PATCH DELETE

@BRWNGRLDEV BLOG

@BRWNGRLDEV User BLOG

@BRWNGRLDEV User Post BLOG

@BRWNGRLDEV User Post Comment BLOG

@BRWNGRLDEV BLOG User Post Comment

@BRWNGRLDEV GraphQL is… A SPECIFICATION

@BRWNGRLDEV

@BRWNGRLDEV Give me 
 some data!

@BRWNGRLDEV You didn’t 
 say please!

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

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

@BRWNGRLDEV GraphQL is… INTROSPECTIVE

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

@BRWNGRLDEV query {

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

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

@BRWNGRLDEV

@BRWNGRLDEV GraphQL is… a query language a specification introspective

@BRWNGRLDEV SO WHAT?!

@BRWNGRLDEV R E S T

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

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

@BRWNGRLDEV

@BRWNGRLDEV

@BRWNGRLDEV

SERVER @BRWNGRLDEV

@BRWNGRLDEV Single Endpoint /graphql

@BRWNGRLDEV HTTP GET

/GRAPHQL?QUERY= <QUERY>

@BRWNGRLDEV

HTTP GET

/GRAPHQL?QUERY= <QUERY> “{

sightings { id shape

} }”

@BRWNGRLDEV HTTP POST

/GRAPHQL

@BRWNGRLDEV {

“query” : “{ sightings

{ id shape

} }” } HTTP POST

/GRAPHQL

@BRWNGRLDEV Postman

@BRWNGRLDEV Postman

@BRWNGRLDEV BUILDING OUR SERVER

@BRWNGRLDEV Ktor – Server Framework

@BRWNGRLDEV Ktor – Server Framework Koin – Dependency Injection

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

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

@BRWNGRLDEV GraphQL Server… Types Schema Resolvers

@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

@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

@BRWNGRLDEV type UFOSighting {

id: Int! city: String

}

@BRWNGRLDEV type UFOSighting {

id: Int! city: String

}

@BRWNGRLDEV type UFOSighting {

id: Int! city: String

} { sightings

{ id { ???
} city } }

@BRWNGRLDEV type UFOSighting {

id: Int! city: String

} { sightings

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

@BRWNGRLDEV type <UFOSighting>

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

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

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

id: Int! city: String

}

@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

@BRWNGRLDEV schema {

query: Query

}

@BRWNGRLDEV type Query {

sighting (id: Int) :

UFOSighting

} schema { query: Query }

@BRWNGRLDEV type UFOSighting {

id: Int! city: String

} type Query {

sighting(id: Int): UFOSighting

} schema { query: Query }

@BRWNGRLDEV Data, 
 please! Why, yes!

@BRWNGRLDEV KGraphQL. schema {

}

@BRWNGRLDEV KGraphQL.schema {

type <UFOSighting> }

@BRWNGRLDEV KGraphQL.schema {

type <UFOSighting>

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

@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

@BRWNGRLDEV Resolver query ("sighting") { 3

resolver { 3 id: Int ->

storage .getSighting(id) } 3

} 3

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

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

} 3

} 3

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

@BRWNGRLDEV { sighting(id: 45) {

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

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

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

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

} 3 Resolver - Mutation

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

storage .createSighting(input…) } } 3

@BRWNGRLDEV Resolver - schema.json

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

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

@BRWNGRLDEV schema resolvers /graphql

CLIENT @BRWNGRLDEV

@BRWNGRLDEV Sample Application

@BRWNGRLDEV Sample Application KOTLIN

@BRWNGRLDEV Sample Application KOTLIN ARCHITECTURE COMPONENTS

@BRWNGRLDEV Sample Application KOTLIN ARCHITECTURE COMPONENTS APOLLO ANDROID

@BRWNGRLDEV GraphQL Client… Apollo Client Schema .graphql Files

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

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

.build()

@BRWNGRLDEV apollo-codegen download-schema

@BRWNGRLDEV Schema

@BRWNGRLDEV .graphql File

@BRWNGRLDEV .graphql File

@BRWNGRLDEV .graphql File Plugin

@BRWNGRLDEV .graphql File Plugin

@BRWNGRLDEV

@BRWNGRLDEV Generated Code…

@BRWNGRLDEV Apollo Client Schema .graphql Files

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

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

@BRWNGRLDEV apolloClient .query( query ) Enqueue the request

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

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

@BRWNGRLDEV Handle the response {

"data" : {

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

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

// notify your UI

}

@BRWNGRLDEV

TIPS & TRICKS @BRWNGRLDEV

@BRWNGRLDEV IntelliJ GraphQL Plugin…

@BRWNGRLDEV A CLIENT IS OPTIONAL

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

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

@BRWNGRLDEV TRUE / FALSE RAPID

FIRE @BRWNGRLDEV

@BRWNGRLDEV GRAPHQL WAS DESIGNED FOR GRAPH DATABASES. @BRWNGRLDEV

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

@BRWNGRLDEV GRAPHQL IS LANGUAGE AGNOSTIC. @BRWNGRLDEV

@BRWNGRLDEV GRAPHQL IS LANGUAGE AGNOSTIC. TRUE @BRWNGRLDEV

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

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

@BRWNGRLDEV REST IS DEAD. @BRWNGRLDEV

@BRWNGRLDEV YOU DECIDE @BRWNGRLDEV

GETTING A GRIP ON GRAPHQL @BRWNGRLDEV

ADAVIS.INFO