Upgrade to Pro — share decks privately, control downloads, hide ads and more …

GraphQL on Rails

GraphQL on Rails

Marc-Andre Giroux

September 24, 2016
Tweet

More Decks by Marc-Andre Giroux

Other Decks in Programming

Transcript

  1. @__xuorig__ Server Client Updates a view Creates a new view

    New view version Model changes Update endpoints Create new endpoint
  2. @__xuorig__ yo, give me the resource with id = abc

    OK, here’s the resource with id = abc Client Server
  3. @__xuorig__ yo, give me the resource v2 with id =

    abc OK, here’s the resource v2 with id = abc Client Server
  4. @__xuorig__ yo, give me the resource v3 with id =

    abc OK, here’s the resource v3 with id = abc Client Server
  5. @__xuorig__ { myShop { name } } Lexed Parsed Validated

    Executed { “myShop” { “name”: “GitHub” } }
  6. @__xuorig__ { myShop { name location { city address }

    products(orderby: POPULARITY) { name price } } }
  7. @__xuorig__ { “myShop”: { “name”: “Euruko 2016” “location” { “city”:

    “Sofia” “address”: “Av. Diagonal 547” } “products”: [{ “name”: “Conference Ticket” “price”: 500000 }, { “name”: “Cool T-Shirt” “price”: 20000 }] } }
  8. @__xuorig__ { myShop { name location { city address }

    products(orderby: POPULARITY) { name price } } }
  9. @__xuorig__ { myShop { name location { city address }

    products(orderby: POPULARITY) { name price } } }
  10. @__xuorig__ { myShop { name location { city address }

    products(orderby: POPULARITY) { name price } } }
  11. @__xuorig__ type Shop { name: String location: Address products(orderby: OrderEnum):

    [Product] } enum ProductOrderEnum { PRICE, POPULARITY, ALPHABETICAL }
  12. @__xuorig__ { myShop { name location { city address }

    products(orderby: POPULARITY) { name price } } }
  13. @__xuorig__ { myShop { name location { city address }

    products(orderby: POPULARITY) { name price } } }
  14. @__xuorig__ { myShop { name yolo { swag } }

    } type Shop { name: String location: Address }
  15. @__xuorig__ { myShop { name location { city address }

    products(orderby: POPULARITY) { id name price } } }
  16. @__xuorig__ { myShop { name location { city address }

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

    products(orderby: POPULARITY) { ...productFields } } }
  18. @__xuorig__ field :price do type types.Int resolve -> (obj, args,

    ctx) do obj.subtotal + obj.taxes + obj.shipping_price end end
  19. @__xuorig__ module Api class GraphqlController < ApiController def query query_string

    = params[:query] variables = params[:variables] context = { current_user: current_user } # ... end end end
  20. @__xuorig__ module Api class GraphqlController < ApiController def query #

    ... result = MySchema.query( query_string, variables: variables, context: context ) render json: result end end end
  21. @__xuorig__ # Product Type field :image do type ImageType resolve

    -> (product, args, ctx) do product.image end end # Shop Type field :products do type [ProductType] resolve -> (shop, args, ctx) do shop.products end end
  22. @__xuorig__ Product Load (1.0ms) SELECT "products".* FROM "products" WHERE "products"."shop_id"

    = … Image Load (0.9ms) SELECT "images".* FROM "images" WHERE "images"."product_id" = … Image Load (0.2ms) SELECT "images".* FROM "images" WHERE "images"."product_id" = … Image Load (0.1ms) SELECT "images".* FROM "images" WHERE "images"."product_id" = …
  23. @__xuorig__ field :image do type ImageType resolve -> (product, args,

    ctx) do RecordLoader.for(Image).load(product.image_id) end end
  24. @__xuorig__ query { shop { products { price } }

    } query { shop { product(id: 1) { price } } }
  25. @__xuorig__ yo, give me the resource with id = abc

    OK, here’s the resource with id = abc Client Server
  26. @__xuorig__ Client Server yo, give me the resource with id

    = 1 yo, give me the resource with id = 2 yo, give me the resource with id = 3 yo, give me the resource with id = 4
  27. @__xuorig__ I need that exact data shape (requirements) Here is

    everything you can do! (capabilities) Client Server