GraphQL on Rails - Speaker Deck

Slide 1

Slide 1 text

GraphQL on Rails FROM REST TO GRAP HQL @ _ _XU O R IG _ _

Slide 2

Slide 2 text

@ _ _XU O R IG _ _

Slide 3

Slide 3 text

/product/1 product/1/photos/a product/1/photos/b product/1/variants

Slide 4

Slide 4 text

Way too many roundtrips!

Slide 5

Slide 5 text

/productview?include=variants&photo_count=2

Slide 6

Slide 6 text

/productview_thumbnail?include=price /productview_thumbnail?include=price&photo_size=small /productview_super_special_thumbnail_with_description?photo_size=100,1000 /an_endpoint_that_returns_a_bunch_of_things_that_i_need_for_a_particular_view

Slide 7

Slide 7 text

Better, but quickly becomes a nightmare.

Slide 8

Slide 8 text

Server Client product view v1 product model v1 update endpoints create new endpoints product view v2 product view v3 product model v2 product model v3

Slide 9

Slide 9 text

GraphQL to the rescue

Slide 10

Slide 10 text

{ myShop { name } } Selection set Field

Slide 11

Slide 11 text

{ “myShop” { “name”: “GitHub” } } { myShop { name } } Lexed Parsed Validated Executed

Slide 12

Slide 12 text

{ myShop { name } }

Slide 13

Slide 13 text

{ shop(id: 19423) { name } } { myShop { name } }

Slide 14

Slide 14 text

{ myShop { name location { city address } } }

Slide 15

Slide 15 text

{ “myShop” { “name”: “GitHub” “location”: { “city”: “San Francisco” “address”: “88 Colin P Kelly Jr St” } } }

Slide 16

Slide 16 text

The Type System

Slide 17

Slide 17 text

{ myShop { name location { city address } products(orderby: POPULARITY) { name price } } }

Slide 18

Slide 18 text

{ myShop { name location { city address } products(orderby: POPULARITY) { name price } } } type QueryRoot { myShop: Shop shop(id: Int): Shop }

Slide 19

Slide 19 text

{ myShop { name location { city address } products(orderby: POPULARITY) { name price } } } type Shop { name: String location: Address products(orderby: OrderEnum): [Product] } enum ProductOrderEnum { PRICE, POPULARITY, ALPHABETICAL }

Slide 20

Slide 20 text

{ myShop { name location { city address } products(orderby: POPULARITY) { name price } } } type Address { city: String address: String }

Slide 21

Slide 21 text

{ myShop { name location { city address } products(orderby: POPULARITY) { name price } } } type Product { name: String price: Int }

Slide 22

Slide 22 text

Server Client H ER E I S P RO DU C T W I TH I D = 1 G ET P R OD U C T W IT H I D= 1

Slide 23

Slide 23 text

Server Client EX P O SES S C HE M A O F AL L PO S SI B I L IT I ES ( T Y P E SYS T EM ) DATA R EQ UI R EM EN T S (G R AP H Q L LA N GUAG E )

Slide 24

Slide 24 text

Server Client O K H ER E’S EX AC T LY T HE DATA YO U NEE D G I VE ME DATA O F T HAT PAR T IC U LA R S H AP E

Slide 25

Slide 25 text

Server Client product view v1 Product model v1 product view v3 Product model v3 product view v2 Product model v2 Doesn’t care

Slide 26

Slide 26 text

One endpoint to rule them all

Slide 27

Slide 27 text

Web iOS App POS App Android App

Slide 28

Slide 28 text

Fragments

Slide 29

Slide 29 text

{ myShop { name location { city address } } }

Slide 30

Slide 30 text

{ myShop { name …locationFragment } } fragment locationFragment on Shop { location { city address } }

Slide 31

Slide 31 text

Mutations

Slide 32

Slide 32 text

{ createBlog(title: “my cool blog") { title } }

Slide 33

Slide 33 text

Introspection

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

IDE integration Static Validation Code Generation Auto Documentation

Slide 36

Slide 36 text

GraphQL on Rails

Slide 37

Slide 37 text

rails generate model Blog title:string content:string author_id:integer rails generate model Author name:string class Blog < ActiveRecord::Base has_one :author end

Slide 38

Slide 38 text

GEM ‘GRAPHQL’

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

query allBlogs { blogs { title author { name } } }

Slide 43

Slide 43 text

{ "data": { "blogs": [ { "title": "Intro to GraphQL", "content": "Something something something. Blah blah blah. Etc etc etc.", "author": { "name": "Marc-Andre Giroux" } }, { "title": "Hello, it's me", "content": "I've been wondering", "author": { "name": "Marc-Andre Giroux" } }, { "title": "Hello, it's me", "content": "I've been wondering", "author": { "name": "Marc-Andre Giroux" } } ] } }

Slide 44

Slide 44 text

GraphiQL

Slide 45

Slide 45 text

MG I ROUX.M E G RAPH QL-SLACK .HE R OK UA P P.COM/ Slack channel My blog graphql-ruby G IT HU B.COM /R MO SO LG O/ G R A P H Q L-R U BY Twitter @__ XUORI G__

Slide 46

Slide 46 text

Thank You :D