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



Stefan Kanev

March 28, 2018

More Decks by Stefan Kanev

Other Decks in Programming


  1. GraphQL Stefan Kanev http://skanev.com/ @skanev Slovenia Ruby User Group 28

    March 2018 Ljubljana Why is it exciting?
  2. Hi, I’m Stefan

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

  4. Chief Technical Officer @

  5. None
  6. Despite the management title, I still tend to think of

    myself as a programmer
  7. None
  8. This should be part talk, part Q&A

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

  10. 1 Walkthrough

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

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

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

  14. 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
  15. None
  16. None
  17. query { hero { name friends { name } }

    } Query { "data": { "hero": { "name": "R2-D2", "friends": [ { "name": "Luke Skywalker" }, { "name": "Han Solo" }, { "name": "Leia Organa" } ] } } } Response
  18. 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"] } ] } } }
  19. 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
  20. 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?
  21. queries vs. mutations “gets” data changes stuff

  22. 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
  23. 2 Demonstration

  24. 3 Benefits

  25. 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
  26. Self-documenting

  27. 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”
  28. Versionless evolution Versioning APIs is a bitch 
 You can

    get away with not doing it to a large extent 
  29. Traffic optimisation You get only what you asked for 

    You can get multiple things with a single request
  30. 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
  31. 4 React and Relay

  32. None
  33. None
  34. ?