Getting a Grip on GraphQL

GETTING A GRIP
ON GRAPHQL@BRWNGRLDEV

@BRWNGRLDEV
Basics
Server
AGENDA

@BRWNGRLDEV
Basics
Server
Client
AGENDA

@BRWNGRLDEV
GraphQL is…
A QUERY LANGUAGE
FOR YOUR API

@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
sightings {
id
shape
}
}
API

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

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

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

@BRWNGRLDEV
GET
query mutation
POST
PATCH
DELETE

@BRWNGRLDEV
User
Post Comment
BLOG

@BRWNGRLDEV
BLOG
User
Post Comment

@BRWNGRLDEV
GraphQL is…
A SPECIFICATION

@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
GraphQL is…
a query language
a specification
introspective

@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 TG R A P H Q L

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

@BRWNGRLDEV
Ktor – Server Framework

@BRWNGRLDEV
Koin – Dependency Injection

@BRWNGRLDEV
Squash – Database Access

@BRWNGRLDEV
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
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>
var id: Int = -1,
var city: String? = "",
)

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

@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
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
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
schema
resolvers
/graphql

@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
.graphql File
Plugin

@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
IntelliJ GraphQL Plugin…

@BRWNGRLDEV
A CLIENT IS
OPTIONAL

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

@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

Recommended

Recommended

More Related Content

Similar to Getting a Grip on GraphQL

Similar to Getting a Grip on GraphQL (18)

More from Annyce Davis

More from Annyce Davis (18)

Recently uploaded

Recently uploaded (20)

Getting a Grip on GraphQL