Getting a Grip on GraphQL

@BRWNGRLDEV

@BRWNGRLDEV 2013-2014

@BRWNGRLDEV U.S.A

GRAPHQL @BRWNGRLDEV

BASICS @BRWNGRLDEV

@BRWNGRLDEV GraphQL is… A QUERY LANGUAGE FOR YOUR API

@BRWNGRLDEV SELECT name FROM users

@BRWNGRLDEV Karen Aisha James SELECT name FROM users

@BRWNGRLDEV query AllSightings { sightings { id shape } }

mutation subscription

API

{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 FROM: HTTPS://GAMERANT.COM

@BRWNGRLDEV GraphQL is… A SPECIFICATION

@BRWNGRLDEV

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

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

@BRWNGRLDEV GraphQL is… INTROSPECTIVE

@BRWNGRLDEV

@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

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 BUILDING OUR SERVER

@BRWNGRLDEV KOTLIN

@BRWNGRLDEV GraphQL Server… Types Schema Resolvers

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

@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? = "", ) 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 {3id: Int -> storage.getSighting(id) }3
}3

@BRWNGRLDEV Resolver query("sighting") {3 resolver {3id: Int -> “http://sightings/$id".httpGet() }3
}3

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

name } } } Root Query sighting

name } } } Root Query sighting 345 circle

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 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-codegen download-schema

@BRWNGRLDEV Schema

@BRWNGRLDEV .graphql File

@BRWNGRLDEV .graphql File Plugin

@BRWNGRLDEV

@BRWNGRLDEV Generated Code…

@BRWNGRLDEV Apollo Client Schema .graphql Files

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

@BRWNGRLDEV apolloClient .query(query) 2. Enqueue the request

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

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

@BRWNGRLDEV 3. Handle the response { "data" : { "sightings"
: [ { "__typename" : "UFOSighting", "id" : 9297, "date" : "2014-05-08", "shape" : "rectangle", "comments" : "Standing at my window one by one." } ] } }

@BRWNGRLDEV 3. Handle the response fun onResponse(response: Response<T>) { response.data()?.sightings()
// notify your UI }

@BRWNGRLDEV

TIPS & TRICKS @BRWNGRLDEV

@BRWNGRLDEV IntelliJ GraphQL Plugin…

@BRWNGRLDEV Retrofit GraphQL

@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 ONLY FOR DATABASES. @BRWNGRLDEV

@BRWNGRLDEV GRAPHQL WAS DESIGNED ONLY FOR 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

GRAPHQL @BRWNGRLDEV

ADAVIS.INFO

Getting a Grip on GraphQL

Getting a Grip on GraphQL

More Decks by Annyce D.

Other Decks in Programming

Featured

Transcript