Introduction to GraphQL

Slide 1

Slide 1 text

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

let users = [{ name: "John Doe", orders = [object, object, object], coupons = [object, object object] }] users.map(user => ( ))

{user.name} {user.orders.map( order => )} {user.coupons.map( coupon => )}

Slide 8

Slide 8 text

GET /users/1 GET /users/1/orders GET /users/1/coupons - OR - GET /users/1?include=orders,coupons RESTful APIs

Slide 9

Slide 9 text

GET /api/v1/users GET /api/v2/users GET /api/v3/users GET /api/v4/users GET /api/v5/users RESTful APIs

Slide 10

Slide 10 text

• 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 ﬂexibility. New product requirements can be very disruptive. RESTful APIs

Slide 11

Slide 11 text

Slide 12

Slide 12 text

• 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?

Slide 13

Slide 13 text

GraphQL !!!

Slide 14

Slide 14 text

GraphQL

Slide 15

Slide 15 text

POST /graphql GraphQL { user(id: 1) { name orders { number } coupons { number expireDate } } } { "data": { "user": { "name": "John Doe", "orders": [Order], "coupons": [Order] } } } HTTP 200/OK

Slide 16

Slide 16 text

GraphQL fragment on Human { name homePlanet } { luke: human(id: "1000") { ...HumanFragment } leia: human(id: "1003") { ...HumanFragment } }

Slide 17

Slide 17 text

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 }

Slide 18

Slide 18 text

• 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

Slide 19

Slide 19 text

developer.github.com

Slide 20

Slide 20 text

GraphQL Demo

Slide 21

Slide 21 text

graphql-ruby.org

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

GraphQL Web Mobile GQL Service Service Service Service Service

Slide 25

Slide 25 text

github.atom.io

Slide 26

Slide 26 text

Thank You! We’re hiring! (Engineers, QA and Product) brblck.com/stackcommerce-careers Slides will be available on Twitter, LinkedIn and Speaker Deck. Questions?