GraphQL on 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

34. None

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’

39. None
40. None
41. None

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