GraphQL on Rails

GraphQL on Rails

Introduction to GraphQl and how to use it in Rails.

F34d97ba1bfea0ff5e35a9c198562402?s=128

Marc-Andre Giroux

March 15, 2016
Tweet

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