Tweet
Tweet

Slide 1

Slide 1 text

@BRWNGRLDEV

Slide 2

Slide 2 text

@BRWNGRLDEV 2013-2014

Slide 3

Slide 3 text

@BRWNGRLDEV U.S.A

Slide 4

Slide 4 text

GRAPHQL @BRWNGRLDEV

Slide 5

Slide 5 text

BASICS @BRWNGRLDEV

Slide 6

Slide 6 text

@BRWNGRLDEV GraphQL is… A QUERY LANGUAGE FOR YOUR API

Slide 7

Slide 7 text

@BRWNGRLDEV SELECT name FROM users

Slide 8

Slide 8 text

@BRWNGRLDEV SELECT name FROM users

Slide 9

Slide 9 text

@BRWNGRLDEV SELECT name FROM users

Slide 10

Slide 10 text

@BRWNGRLDEV Karen Aisha James SELECT name FROM users

Slide 11

Slide 11 text

@BRWNGRLDEV query AllSightings { sightings { id shape } }

Slide 12

Slide 12 text

@BRWNGRLDEV query AllSightings { sightings { id shape } } mutation subscription

Slide 13

Slide 13 text

@BRWNGRLDEV query AllSightings { sightings { id shape } }

Slide 14

Slide 14 text

@BRWNGRLDEV query AllSightings { sightings { id shape } }

Slide 15

Slide 15 text

@BRWNGRLDEV query AllSightings { sightings { id shape } }

Slide 16

Slide 16 text

@BRWNGRLDEV query AllSightings { sightings { id shape } } API

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

@BRWNGRLDEV query

Slide 21

Slide 21 text

@BRWNGRLDEV GET query

Slide 22

Slide 22 text

@BRWNGRLDEV GET query mutation POST PUT PATCH DELETE

Slide 23

Slide 23 text

@BRWNGRLDEV FROM: HTTPS://GAMERANT.COM

Slide 24

Slide 24 text

@BRWNGRLDEV GraphQL is… A SPECIFICATION

Slide 25

Slide 25 text

@BRWNGRLDEV

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

@BRWNGRLDEV GraphQL is… INTROSPECTIVE

Slide 29

Slide 29 text

@BRWNGRLDEV

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

@BRWNGRLDEV

Slide 34

Slide 34 text

@BRWNGRLDEV GraphQL is… a query language a specification introspective

Slide 35

Slide 35 text

@BRWNGRLDEV SO WHAT?!

Slide 36

Slide 36 text

@BRWNGRLDEV R E S T

Slide 37

Slide 37 text

@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 38

Slide 38 text

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

Slide 39

Slide 39 text

@BRWNGRLDEV

Slide 40

Slide 40 text

@BRWNGRLDEV

Slide 41

Slide 41 text

@BRWNGRLDEV

Slide 42

Slide 42 text

SERVER @BRWNGRLDEV

Slide 43

Slide 43 text

@BRWNGRLDEV Single Endpoint /graphql

Slide 44

Slide 44 text

@BRWNGRLDEV HTTP GET /GRAPHQL?QUERY=

Slide 45

Slide 45 text

@BRWNGRLDEV HTTP GET /GRAPHQL?QUERY= “{ sightings { id shape } }”

Slide 46

Slide 46 text

@BRWNGRLDEV HTTP POST /GRAPHQL

Slide 47

Slide 47 text

@BRWNGRLDEV { “query” : “{ sightings { id shape } }” } HTTP POST /GRAPHQL

Slide 48

Slide 48 text

@BRWNGRLDEV Postman

Slide 49

Slide 49 text

@BRWNGRLDEV Postman

Slide 50

Slide 50 text

@BRWNGRLDEV BUILDING OUR SERVER

Slide 51

Slide 51 text

@BRWNGRLDEV KOTLIN

Slide 52

Slide 52 text

@BRWNGRLDEV GraphQL Server… Types Schema Resolvers

Slide 53

Slide 53 text

@BRWNGRLDEV type UFOSighting { id: Int! city: String }

Slide 54

Slide 54 text

@BRWNGRLDEV type UFOSighting { id: Int! city: String }

Slide 55

Slide 55 text

@BRWNGRLDEV type UFOSighting { id: Int! city: String } { sightings { id { ??? } city } }

Slide 56

Slide 56 text

@BRWNGRLDEV type UFOSighting { id: Int! city: String } { sightings { id { ??? } city } } NOPE!

Slide 57

Slide 57 text

@BRWNGRLDEV type

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

@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 62

Slide 62 text

@BRWNGRLDEV schema { query: Query }

Slide 63

Slide 63 text

@BRWNGRLDEV type Query { sighting(id: Int): UFOSighting } schema { query: Query }

Slide 64

Slide 64 text

@BRWNGRLDEV type UFOSighting { id: Int! city: String } type Query { sighting(id: Int): UFOSighting } schema { query: Query }

Slide 65

Slide 65 text

@BRWNGRLDEV Data, 
 please! Why, yes!

Slide 66

Slide 66 text

@BRWNGRLDEV KGraphQL.schema { }

Slide 67

Slide 67 text

@BRWNGRLDEV KGraphQL.schema { type }

Slide 68

Slide 68 text

@BRWNGRLDEV KGraphQL.schema { type query("sighting") { resolver { id: Int -> …} } }

Slide 69

Slide 69 text

@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 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

@BRWNGRLDEV mutation("createUFOSighting") { description = "Adds a new UFO Sighting” } 3 Resolver - Mutation

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

@BRWNGRLDEV Resolver - schema.json

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

@BRWNGRLDEV schema resolvers /graphql

Slide 82

Slide 82 text

CLIENT @BRWNGRLDEV

Slide 83

Slide 83 text

@BRWNGRLDEV Sample Application

Slide 84

Slide 84 text

@BRWNGRLDEV Sample Application KOTLIN

Slide 85

Slide 85 text

@BRWNGRLDEV Sample Application KOTLIN ARCHITECTURE COMPONENTS

Slide 86

Slide 86 text

@BRWNGRLDEV Sample Application KOTLIN ARCHITECTURE COMPONENTS APOLLO ANDROID

Slide 87

Slide 87 text

@BRWNGRLDEV GraphQL Client… Apollo Client Schema .graphql Files

Slide 88

Slide 88 text

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

Slide 89

Slide 89 text

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

Slide 90

Slide 90 text

@BRWNGRLDEV apollo-codegen download-schema

Slide 91

Slide 91 text

@BRWNGRLDEV Schema

Slide 92

Slide 92 text

@BRWNGRLDEV .graphql File

Slide 93

Slide 93 text

@BRWNGRLDEV .graphql File

Slide 94

Slide 94 text

@BRWNGRLDEV .graphql File Plugin

Slide 95

Slide 95 text

@BRWNGRLDEV .graphql File Plugin

Slide 96

Slide 96 text

@BRWNGRLDEV

Slide 97

Slide 97 text

@BRWNGRLDEV Generated Code…

Slide 98

Slide 98 text

@BRWNGRLDEV Apollo Client Schema .graphql Files

Slide 99

Slide 99 text

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

Slide 100

Slide 100 text

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

Slide 101

Slide 101 text

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

Slide 102

Slide 102 text

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

Slide 103

Slide 103 text

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

Slide 104

Slide 104 text

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

Slide 105

Slide 105 text

@BRWNGRLDEV

Slide 106

Slide 106 text

TIPS & TRICKS @BRWNGRLDEV

Slide 107

Slide 107 text

@BRWNGRLDEV IntelliJ GraphQL Plugin…

Slide 108

Slide 108 text

@BRWNGRLDEV Retrofit GraphQL

Slide 109

Slide 109 text

@BRWNGRLDEV A CLIENT IS OPTIONAL

Slide 110

Slide 110 text

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

Slide 111

Slide 111 text

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

Slide 112

Slide 112 text

@BRWNGRLDEV TRUE/FALSE RAPID FIRE @BRWNGRLDEV

Slide 113

Slide 113 text

@BRWNGRLDEV GRAPHQL WAS DESIGNED ONLY FOR DATABASES. @BRWNGRLDEV

Slide 114

Slide 114 text

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

Slide 115

Slide 115 text

@BRWNGRLDEV GRAPHQL IS LANGUAGE AGNOSTIC. @BRWNGRLDEV

Slide 116

Slide 116 text

@BRWNGRLDEV GRAPHQL IS LANGUAGE AGNOSTIC. TRUE @BRWNGRLDEV

Slide 117

Slide 117 text

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

Slide 118

Slide 118 text

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

Slide 119

Slide 119 text

@BRWNGRLDEV REST IS DEAD. @BRWNGRLDEV

Slide 120

Slide 120 text

@BRWNGRLDEV YOU DECIDE @BRWNGRLDEV

Slide 121

Slide 121 text

GRAPHQL @BRWNGRLDEV

Slide 122

Slide 122 text

ADAVIS.INFO