$30 off During Our Annual Pro Sale. View Details »

GraphQL on Rails

GraphQL on Rails

Introduction to GraphQl and how to use it in Rails.

Marc-Andre Giroux

March 15, 2016
Tweet

More Decks by Marc-Andre Giroux

Other Decks in Programming

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