Introduction to GraphQL

Talk from the LA Ruby Meetup (August 2017).

https://www.meetup.com/laruby/events/241355371

Transcript

1. Introduction to GraphQL
2. Brandon Black
 Director of Platform Engineering linkedin.com/in/brandonmblack github.com/brandonblack twitter.com/brandonmblack
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?