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.

Annyce D.

June 11, 2018
Tweet

More Decks by Annyce D.

Other Decks in Programming

Transcript

  1. @BRWNGRLDEV
    2013-2014

    View full-size slide

  2. @BRWNGRLDEV
    U.S.A

    View full-size slide

  3. GRAPHQL
    @BRWNGRLDEV

    View full-size slide

  4. BASICS
    @BRWNGRLDEV

    View full-size slide

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

    View full-size slide

  6. @BRWNGRLDEV
    SELECT name FROM users

    View full-size slide

  7. @BRWNGRLDEV
    SELECT name FROM users

    View full-size slide

  8. @BRWNGRLDEV
    SELECT name FROM users

    View full-size slide

  9. @BRWNGRLDEV
    Karen
    Aisha
    James
    SELECT name FROM users

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  19. @BRWNGRLDEV
    query

    View full-size slide

  20. @BRWNGRLDEV
    GET
    query

    View full-size slide

  21. @BRWNGRLDEV
    GET
    query mutation
    POST
    PUT
    PATCH
    DELETE

    View full-size slide

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

    View full-size slide

  23. @BRWNGRLDEV
    GraphQL is…
    A SPECIFICATION

    View full-size slide

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

    Server

    View full-size slide

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

    Client

    View full-size slide

  26. @BRWNGRLDEV
    GraphQL is…
    INTROSPECTIVE

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  31. @BRWNGRLDEV
    SO
    WHAT?!

    View full-size slide

  32. @BRWNGRLDEV
    R E S T

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  35. SERVER
    @BRWNGRLDEV

    View full-size slide

  36. @BRWNGRLDEV
    Single Endpoint
    /graphql

    View full-size slide

  37. @BRWNGRLDEV
    HTTP GET
    /GRAPHQL?QUERY=

    View full-size slide

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

    View full-size slide

  39. @BRWNGRLDEV
    HTTP POST
    /GRAPHQL

    View full-size slide

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

    View full-size slide

  41. @BRWNGRLDEV
    Postman

    View full-size slide

  42. @BRWNGRLDEV
    Postman

    View full-size slide

  43. @BRWNGRLDEV
    BUILDING OUR
    SERVER

    View full-size slide

  44. @BRWNGRLDEV
    KOTLIN

    View full-size slide

  45. @BRWNGRLDEV
    GraphQL Server…
    Types
    Schema
    Resolvers

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  50. @BRWNGRLDEV
    type

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  54. @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

    View full-size slide

  55. @BRWNGRLDEV
    schema {
    query: Query
    }

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  58. @BRWNGRLDEV
    Data, 

    please!
    Why, yes!

    View full-size slide

  59. @BRWNGRLDEV
    KGraphQL.schema {
    }

    View full-size slide

  60. @BRWNGRLDEV
    KGraphQL.schema {
    type
    }

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  71. @BRWNGRLDEV
    Resolver - schema.json

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  74. @BRWNGRLDEV
    schema
    resolvers
    /graphql

    View full-size slide

  75. CLIENT
    @BRWNGRLDEV

    View full-size slide

  76. @BRWNGRLDEV
    Sample Application

    View full-size slide

  77. @BRWNGRLDEV
    Sample Application
    KOTLIN

    View full-size slide

  78. @BRWNGRLDEV
    Sample Application
    KOTLIN
    ARCHITECTURE COMPONENTS

    View full-size slide

  79. @BRWNGRLDEV
    Sample Application
    KOTLIN
    ARCHITECTURE COMPONENTS
    APOLLO ANDROID

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  83. @BRWNGRLDEV
    apollo-codegen download-schema

    View full-size slide

  84. @BRWNGRLDEV
    Schema

    View full-size slide

  85. @BRWNGRLDEV
    .graphql File

    View full-size slide

  86. @BRWNGRLDEV
    .graphql File

    View full-size slide

  87. @BRWNGRLDEV
    .graphql File
    Plugin

    View full-size slide

  88. @BRWNGRLDEV
    .graphql File
    Plugin

    View full-size slide

  89. @BRWNGRLDEV
    Generated Code…

    View full-size slide

  90. @BRWNGRLDEV
    Apollo Client
    Schema
    .graphql Files

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  97. TIPS & TRICKS
    @BRWNGRLDEV

    View full-size slide

  98. @BRWNGRLDEV
    IntelliJ GraphQL Plugin…

    View full-size slide

  99. @BRWNGRLDEV
    Retrofit GraphQL

    View full-size slide

  100. @BRWNGRLDEV
    A CLIENT IS
    OPTIONAL

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  103. @BRWNGRLDEV
    TRUE/FALSE
    RAPID FIRE
    @BRWNGRLDEV

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  106. @BRWNGRLDEV
    GRAPHQL IS LANGUAGE
    AGNOSTIC.
    @BRWNGRLDEV

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  110. @BRWNGRLDEV
    REST IS DEAD.
    @BRWNGRLDEV

    View full-size slide

  111. @BRWNGRLDEV
    YOU DECIDE
    @BRWNGRLDEV

    View full-size slide

  112. GRAPHQL
    @BRWNGRLDEV

    View full-size slide