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

GraphQL

 GraphQL

Stefan Kanev

March 28, 2018
Tweet

More Decks by Stefan Kanev

Other Decks in Programming

Transcript

  1. GraphQL
    Stefan Kanev
    http://skanev.com/
    @skanev
    Slovenia Ruby User Group
    28 March 2018
    Ljubljana
    Why is it exciting?

    View full-size slide

  2. Hi, I’m Stefan

    View full-size slide

  3. skanev
    skanev
    skanev.com
    about.me/skanev

    View full-size slide

  4. Chief Technical Officer
    @

    View full-size slide

  5. Despite the management title, I still tend
    to think of myself as a programmer

    View full-size slide

  6. This should be part talk, part Q&A

    View full-size slide

  7. 1
    2
    3
    4
    Walkthrough
    Demonstration
    Benefits
    React and Relay

    View full-size slide

  8. 1
    Walkthrough

    View full-size slide

  9. It’s not a technology
    It’s a standard

    View full-size slide

  10. queries vs. mutations
    “gets” data changes stuff

    View full-size slide

  11. queries vs. mutations
    “gets” data changes stuff

    View full-size slide

  12. Queries
    data on the server is represented as a graph

    the client specifies which part of the graph to fetch

    server returns only those parts

    the input is in a special language

    the output is in JSON

    View full-size slide

  13. query {
    hero {
    name
    friends {
    name
    }
    }
    }
    Query
    {
    "data": {
    "hero": {
    "name": "R2-D2",
    "friends": [
    {
    "name": "Luke Skywalker"
    },
    {
    "name": "Han Solo"
    },
    {
    "name": "Leia Organa"
    }
    ]
    }
    }
    }
    Response

    View full-size slide

  14. Query
    query {
    hero {
    name
    appearsIn
    friends {
    name
    appearsIn
    }
    }
    }
    Response
    {
    "data": {
    "hero": {
    "name": "R2-D2",
    "appearsIn": ["NEWHOPE", "EMPIRE", "JEDI"],
    "friends": [
    {
    "name": "Luke Skywalker",
    "appearsIn": ["NEWHOPE", "EMPIRE", "JEDI"]
    },
    {
    "name": "Han Solo",
    "appearsIn": ["NEWHOPE", "EMPIRE", "JEDI"]
    },
    {
    "name": "Leia Organa",
    "appearsIn": ["NEWHOPE", "EMPIRE", "JEDI"]
    }
    ]
    }
    }
    }

    View full-size slide

  15. Schema
    the graph is composed of objects

    each object is of a specific type

    each type defines a number of fields

    each field has a type

    there is a form of polymorphism

    View full-size slide

  16. type Character {
    name: String!
    friends: [Character]!
    appearsIn: [Episode]!
    }
    type Character {
    name: String!
    friends: [Character!]!
    appearsIn: [Episode!]!
    }
    By the way, this…
    …is better in a different way:
    Anybody see the difference?

    View full-size slide

  17. queries vs. mutations
    “gets” data changes stuff

    View full-size slide

  18. Mutations
    each mutation is a separate endpoint

    it’s RPC-like (conceptually similar to REST mutations)

    it still goes through the GraphQL language

    we’ll see an example later

    View full-size slide

  19. 2
    Demonstration

    View full-size slide

  20. Caveat emptor
    It might be a better fit for when you control the client, as
    opposed to letting anybody create a client

    The complexity on the backend is a magnitude bigger

    View full-size slide

  21. Self-documenting

    View full-size slide

  22. Decouples clients from backend
    once the graph is large enough, clients won’t need to
    request (as many) endpoints for reading

    it’s closer to “write once”

    View full-size slide

  23. Versionless evolution
    Versioning APIs is a bitch

    You can get away with not doing it to a large extent

    (example)

    View full-size slide

  24. Traffic optimisation
    You get only what you asked for

    You can get multiple things with a single request

    View full-size slide

  25. Structure
    It provides a lot of structure to build 3rd party tools on

    (especially in comparison to REST)

    GraphiQL is a good example

    Apollo Engine is another one

    Relay is the most interesting example

    View full-size slide

  26. 4
    React and Relay

    View full-size slide