Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Getting a Grip on GraphQL

Getting a Grip on GraphQL

GraphQL is a query language for your API. This allows you to interact with your existing web services and databases in a new way. Instead of relying on a predetermined output structure from your API, you can “query” it and choose only the fields that you’re interested in. In this talk, learn what GraphQL is all about and how you can take advantage of it in your applications.

Ce5b219b385d3e316a553d8a41900ed9?s=128

Annyce D.

June 11, 2018
Tweet

More Decks by Annyce D.

Other Decks in Programming

Transcript

  1. @BRWNGRLDEV

  2. @BRWNGRLDEV 2013-2014

  3. @BRWNGRLDEV U.S.A

  4. GRAPHQL @BRWNGRLDEV

  5. BASICS @BRWNGRLDEV

  6. @BRWNGRLDEV GraphQL is… A QUERY LANGUAGE FOR YOUR API

  7. @BRWNGRLDEV SELECT name FROM users

  8. @BRWNGRLDEV SELECT name FROM users

  9. @BRWNGRLDEV SELECT name FROM users

  10. @BRWNGRLDEV Karen Aisha James SELECT name FROM users

  11. @BRWNGRLDEV query AllSightings { sightings { id shape } }

  12. @BRWNGRLDEV query AllSightings { sightings { id shape } }

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

  14. @BRWNGRLDEV query AllSightings { sightings { id shape } }

  15. @BRWNGRLDEV query AllSightings { sightings { id shape } }

  16. @BRWNGRLDEV query AllSightings { sightings { id shape } }

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

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

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

    : 1, “shape” : “circle” } ] } }
  20. @BRWNGRLDEV query

  21. @BRWNGRLDEV GET query

  22. @BRWNGRLDEV GET query mutation POST PUT PATCH DELETE

  23. @BRWNGRLDEV FROM: HTTPS://GAMERANT.COM

  24. @BRWNGRLDEV GraphQL is… A SPECIFICATION

  25. @BRWNGRLDEV

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

    Server
  27. @BRWNGRLDEV C# / .NET Go Java / Android JavaScript Python

    Swift … Client
  28. @BRWNGRLDEV GraphQL is… INTROSPECTIVE

  29. @BRWNGRLDEV

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

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

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

    } }
  33. @BRWNGRLDEV

  34. @BRWNGRLDEV GraphQL is… a query language a specification introspective

  35. @BRWNGRLDEV SO WHAT?!

  36. @BRWNGRLDEV R E S T

  37. @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” }, …
  38. @BRWNGRLDEV R E S T G R A P H

    Q L
  39. @BRWNGRLDEV

  40. @BRWNGRLDEV

  41. @BRWNGRLDEV

  42. SERVER @BRWNGRLDEV

  43. @BRWNGRLDEV Single Endpoint /graphql

  44. @BRWNGRLDEV HTTP GET /GRAPHQL?QUERY=<QUERY>

  45. @BRWNGRLDEV HTTP GET /GRAPHQL?QUERY=<QUERY> “{ sightings { id shape }

    }”
  46. @BRWNGRLDEV HTTP POST /GRAPHQL

  47. @BRWNGRLDEV { “query” : “{ sightings { id shape }

    }” } HTTP POST /GRAPHQL
  48. @BRWNGRLDEV Postman

  49. @BRWNGRLDEV Postman

  50. @BRWNGRLDEV BUILDING OUR SERVER

  51. @BRWNGRLDEV KOTLIN

  52. @BRWNGRLDEV GraphQL Server… Types Schema Resolvers

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

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

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

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

    sightings { id { ??? } city } } NOPE!
  57. @BRWNGRLDEV type<UFOSighting>

  58. @BRWNGRLDEV type<UFOSighting> data class UFOSighting( var id: Int = -1,

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

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

    var city: String? = "", ) type UFOSighting { id: Int! city: String }
  61. @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
  62. @BRWNGRLDEV schema { query: Query }

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

    query: Query }
  64. @BRWNGRLDEV type UFOSighting { id: Int! city: String } type

    Query { sighting(id: Int): UFOSighting } schema { query: Query }
  65. @BRWNGRLDEV Data, 
 please! Why, yes!

  66. @BRWNGRLDEV KGraphQL.schema { }

  67. @BRWNGRLDEV KGraphQL.schema { type<UFOSighting> }

  68. @BRWNGRLDEV KGraphQL.schema { type<UFOSighting> query("sighting") { resolver { id: Int

    -> …} } }
  69. @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
  70. @BRWNGRLDEV Resolver query("sighting") {3 resolver {3id: Int -> storage.getSighting(id) }3

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

    }3
  72. @BRWNGRLDEV { sighting(id: 45) { id shape user { id

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

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

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

    name } } } Root Query sighting 345 circle user 24 Shuri
  76. @BRWNGRLDEV mutation("createUFOSighting") { description = "Adds a new UFO Sighting”

    } 3 Resolver - Mutation
  77. @BRWNGRLDEV Resolver - Mutation mutation("createUFOSighting") { description = "Adds a

    new UFO Sighting” resolver { input: CreateUFOSightingInput -> storage.createSighting(input…) } } 3
  78. @BRWNGRLDEV Resolver - schema.json

  79. @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) } }
  80. @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) } }
  81. @BRWNGRLDEV schema resolvers /graphql

  82. CLIENT @BRWNGRLDEV

  83. @BRWNGRLDEV Sample Application

  84. @BRWNGRLDEV Sample Application KOTLIN

  85. @BRWNGRLDEV Sample Application KOTLIN ARCHITECTURE COMPONENTS

  86. @BRWNGRLDEV Sample Application KOTLIN ARCHITECTURE COMPONENTS APOLLO ANDROID

  87. @BRWNGRLDEV GraphQL Client… Apollo Client Schema .graphql Files

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

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

  90. @BRWNGRLDEV apollo-codegen download-schema

  91. @BRWNGRLDEV Schema

  92. @BRWNGRLDEV .graphql File

  93. @BRWNGRLDEV .graphql File

  94. @BRWNGRLDEV .graphql File Plugin

  95. @BRWNGRLDEV .graphql File Plugin

  96. @BRWNGRLDEV

  97. @BRWNGRLDEV Generated Code…

  98. @BRWNGRLDEV Apollo Client Schema .graphql Files

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

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

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

    the request
  102. @BRWNGRLDEV apolloClient .query(query) .enqueue(object : Callback<T>() { fun onResponse(response: Response<T>)

    fun onFailure(e: ApolloException) }) 2. Enqueue the request
  103. @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." } ] } }
  104. @BRWNGRLDEV 3. Handle the response fun onResponse(response: Response<T>) { response.data()?.sightings()

    // notify your UI }
  105. @BRWNGRLDEV

  106. TIPS & TRICKS @BRWNGRLDEV

  107. @BRWNGRLDEV IntelliJ GraphQL Plugin…

  108. @BRWNGRLDEV Retrofit GraphQL

  109. @BRWNGRLDEV A CLIENT IS OPTIONAL

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

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

  112. @BRWNGRLDEV TRUE/FALSE RAPID FIRE @BRWNGRLDEV

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

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

  115. @BRWNGRLDEV GRAPHQL IS LANGUAGE AGNOSTIC. @BRWNGRLDEV

  116. @BRWNGRLDEV GRAPHQL IS LANGUAGE AGNOSTIC. TRUE @BRWNGRLDEV

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

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

  119. @BRWNGRLDEV REST IS DEAD. @BRWNGRLDEV

  120. @BRWNGRLDEV YOU DECIDE @BRWNGRLDEV

  121. GRAPHQL @BRWNGRLDEV

  122. ADAVIS.INFO