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

Introduction to GraphQL

Introduction to GraphQL

Talk from the LA Ruby Meetup (August 2017).



Brandon Black

August 25, 2017


  1. Introduction to GraphQL

  2. Brandon Black
 Director of Platform Engineering linkedin.com/in/brandonmblack github.com/brandonblack twitter.com/brandonmblack

  3. None
  4. None
  5. None
  6. None
  7. let users = [{ name: "John Doe", orders = [object,

    object, object], coupons = [object, object object] }] users.map(user => ( <user user="{user}"><user/> )) <div> <span>{user.name}</span> {user.orders.map( order => <order order="{order}"></order> )} {user.coupons.map( coupon => <coupon coupon="{coupon}"></coupon> )} </div>
  8. GET /users/1 GET /users/1/orders GET /users/1/coupons - OR - GET

    /users/1?include=orders,coupons RESTful APIs
  9. GET /api/v1/users GET /api/v2/users GET /api/v3/users GET /api/v4/users GET /api/v5/users

    RESTful APIs
  10. • As a consumer, you have no control over the

    interface. • As a provider, you have lots of versioning and long term support headaches. • No built-in support for deprecation, documentation, etc. • Overall lack of flexibility. New product requirements can be very disruptive. RESTful APIs
  11. +

  12. • It’s a robust and very expressive query language (hence

    the QL part) for communicating between services. • It’s designed to be a common interface between clients and back-end services that allows the clients to query and mutate data according to their needs. • In GraphQL, you’d interact with the API through a single endpoint. What Is GraphQL?
  13. GraphQL !!!

  14. GraphQL

  15. POST /graphql GraphQL { user(id: 1) { name orders {

    number } coupons { number expireDate } } } { "data": { "user": { "name": "John Doe", "orders": [Order], "coupons": [Order] } } } HTTP 200/OK
  16. GraphQL fragment on Human { name homePlanet } { luke:

    human(id: "1000") { ...HumanFragment } leia: human(id: "1003") { ...HumanFragment } }
  17. GraphQL type Query { user: User, order: Order, coupon: Coupon

    } type User { id: !String, name: String, orders: [Order], coupons: [Coupon] } type Order { id: !String, user: User, number: Int } type Coupon { id: !String, user: User, number: Int }
  18. • Strongly typed schema which can be easily introspected. •

    Build in versioning and documentation. • Write operations available through mutations. • Advanced structures like subscriptions or workflows / chained operations. • Allows abstraction from backend services without sacrificing query flexibility. • Allows backend optimization through promise chains and object caching. GraphQL
  19. developer.github.com

  20. GraphQL Demo

  21. graphql-ruby.org

  22. GraphQL Front-End Layer Mobile Application Layer (Controllers) Service Layer

  23. GraphQL Front-End Layer Mobile Application Layer (Controllers) Service Layer Front-End

    Layer Mobile Application Layer (Controllers) Service Layer Front-End Layer Mobile Application Layer (Controllers) Service Layer Database
  24. GraphQL Web Mobile GQL Service Service Service Service Service

  25. github.atom.io

  26. Thank You! We’re hiring! (Engineers, QA and Product) brblck.com/stackcommerce-careers Slides

    will be available on Twitter, LinkedIn and Speaker Deck. Questions?