GraphQL on Rails

Introduction to GraphQl and how to use it in Rails.

Transcript

1. GraphQL on Rails FROM REST TO GRAP HQL @ _ _XU O R IG _ _
2. @ _ _XU O R IG _ _
3. /product/1 product/1/photos/a product/1/photos/b product/1/variants
4. Way too many roundtrips!
5. /productview?include=variants&photo_count=2
6. /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
7. Better, but quickly becomes a nightmare.
8. 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
9. GraphQL to the rescue
10. { myShop { name } } Selection set Field
11. { “myShop” { “name”: “GitHub” } } { myShop { name } } Lexed Parsed Validated Executed
12. { myShop { name } }
13. { shop(id: 19423) { name } } { myShop { name } }
14. { myShop { name location { city address } } }
15. { “myShop” { “name”: “GitHub” “location”: { “city”: “San Francisco” “address”: “88 Colin P Kelly Jr St” } } }
16. The Type System
17. { myShop { name location { city address } products(orderby: POPULARITY) { name price } } }
18. { myShop { name location { city address } products(orderby: POPULARITY) { name price } } } type QueryRoot { myShop: Shop shop(id: Int): Shop }
19. { 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 }
20. { myShop { name location { city address } products(orderby: POPULARITY) { name price } } } type Address { city: String address: String }
21. { myShop { name location { city address } products(orderby: POPULARITY) { name price } } } type Product { name: String price: Int }
22. 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
23. 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 )
24. 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
25. Server Client product view v1 Product model v1 product view v3 Product model v3 product view v2 Product model v2 Doesn’t care
26. One endpoint to rule them all
27. Web iOS App POS App Android App
28. Fragments
29. { myShop { name location { city address } } }
30. { myShop { name …locationFragment } } fragment locationFragment on Shop { location { city address } }
31. Mutations
32. { createBlog(title: “my cool blog") { title } }
33. Introspection
35. IDE integration Static Validation Code Generation Auto Documentation
36. GraphQL on Rails
37. 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
38. GEM ‘GRAPHQL’
42. query allBlogs { blogs { title author { name } } }
43. { "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" } } ] } }
44. GraphiQL
45. 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__
46. Thank You :D