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 _ _
   

   View Slide

2. @ _ _XU O R IG _ _
   

   View Slide

3. /product/1
   product/1/photos/a
   product/1/photos/b
   product/1/variants
   

   View Slide

4. Way too many roundtrips!
   

   View Slide

5. /productview?include=variants&photo_count=2
   

   View Slide

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
   

   View Slide

7. Better, but quickly becomes
   a nightmare.
   

   View Slide

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
   

   View Slide

9. GraphQL to the rescue
   

   View Slide

10. {
    myShop {
    name
    }
    }
    Selection set
    Field
    

    View Slide

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

    View Slide

12. {
    myShop {
    name
    }
    }
    

    View Slide

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

    View Slide

14. {
    myShop {
    name
    location {
    city
    address
    }
    }
    }
    

    View Slide

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

    View Slide

16. The Type System
    

    View Slide

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

    View Slide

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

    View Slide

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
    }
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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 )
    

    View Slide

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
    

    View Slide

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

    View Slide

26. One endpoint to rule them all
    

    View Slide

27. Web iOS App POS App Android App
    

    View Slide

28. Fragments
    

    View Slide

29. {
    myShop {
    name
    location {
    city
    address
    }
    }
    }
    

    View Slide

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

    View Slide

31. Mutations
    

    View Slide

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

    View Slide

33. Introspection
    

    View Slide

34. View Slide

35. IDE integration
    Static Validation
    Code Generation
    Auto Documentation
    

    View Slide

36. GraphQL on Rails
    

    View Slide

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
    

    View Slide

38. GEM ‘GRAPHQL’
    

    View Slide

39. View Slide

40. View Slide

41. View Slide

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

    View Slide

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"
    }
    }
    ]
    }
    }
    

    View Slide

44. GraphiQL
    

    View Slide

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__
    

    View Slide

46. Thank You :D
    

    View Slide