GraphQL on Rails

GraphQL on Rails
Marc-Andre Giroux @__xuorig__

View Slide

@__xuorig__

View Slide

@__xuorig__
therakiasite.blogspot.com

View Slide

@__xuorig__
Montreal, Canada

View Slide

@__xuorig__

View Slide

@__xuorig__
A simple UI component

View Slide

@__xuorig__

View Slide

@__xuorig__
What kind of data is needed?

View Slide

@__xuorig__
Cart Product ProductImage

View Slide

@__xuorig__
Reusable endpoints (REST)

View Slide

@__xuorig__
/carts/1
/products/1
/products/2
/products/3
/product_images/1
/product_images/2
/product_images/3

View Slide

@__xuorig__
Too many round trips!

View Slide

@__xuorig__
/carts/1?expand=products

View Slide

@__xuorig__
/carts/1?ﬁelds=products(name, description, price)

View Slide

@__xuorig__
/carts/1?ﬁelds=products/name,description,price

View Slide

@__xuorig__
Custom Endpoints

View Slide

@__xuorig__
/cart_with_all_the_stuff_i_need

View Slide

@__xuorig__

View Slide

@__xuorig__
/cart_with_all_the_stuff_i_need
/cart_version_2_with_all_the_things
/cart_with_products_and_images
/cart_with_products_and_images_with_price_and_taxes
my_tightly_coupled_custom_endpoint_including_only_the_things_i_need_bla_bla_bla_bla
/cart_with_products_and_images_with_price_and_taxes_but_no_description
/cart_with_products_and_images_with_price_and_taxes_but_no_description_v2

View Slide

@__xuorig__

View Slide

@__xuorig__
Server
Client
Updates a view
Creates a new view
New view version
Model changes
Update endpoints
Create new endpoint

View Slide

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

View Slide

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

View Slide

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

View Slide

@__xuorig__
GraphQL

View Slide

@__xuorig__
What GraphQL is NOT

View Slide

@__xuorig__
What GraphQL IS

View Slide

@__xuorig__
{
myShop {
name
}
} Field
Selection Set

View Slide

@__xuorig__
{
myShop {
name
}
}
Lexed
Parsed
Validated
Executed
{
“myShop” {
“name”: “GitHub”
}
}

View Slide

@__xuorig__
{
myShop {
name
}
}

View Slide

@__xuorig__

View Slide

@__xuorig__
{
shop(id: 1) {
name
}
}

View Slide

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

View Slide

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

View Slide

@__xuorig__
Type System

View Slide

@__xuorig__
{
myShop {
name
location {
city
address
}
name
price
}
}
}

View Slide

@__xuorig__
type QueryRoot {
myShop: Shop
shop(id: Int): Shop
}

View Slide

@__xuorig__
{
myShop {
name
location {
city
address
}
name
price
}
}
}

View Slide

@__xuorig__
type Shop {
name: String
location: Address
products(orderby: OrderEnum): [Product]
}
enum ProductOrderEnum {
PRICE,
POPULARITY,
ALPHABETICAL
}

View Slide

@__xuorig__
{
myShop {
name
location {
city
address
}
name
price
}
}
}

View Slide

@__xuorig__
type Address {
city: String
address: String
}

View Slide

@__xuorig__
{
myShop {
name
location {
city
address
}
name
price
}
}
}

View Slide

@__xuorig__
type Product {
name: String
price: Int
}

View Slide

@__xuorig__
{
myShop {
name
yolo {
swag
}
}
}

View Slide

@__xuorig__
{
myShop {
name
yolo {
swag
}
}
}
type Shop {
name: String
location: Address
}

View Slide

@__xuorig__
Introspection

View Slide

@__xuorig__
query {
__schema {
…
}
}

View Slide

@__xuorig__
Static Validation
Code Generation
IDE Integration
Auto Documentation

View Slide

@__xuorig__

View Slide

@__xuorig__
{
myShop {
name
location {
city
address
}
id
name
price
}
}
}

View Slide

@__xuorig__

View Slide

@__xuorig__
{
myShop {
name
location {
city
address
}
id
name
price
}
}
}

View Slide

@__xuorig__
Fragments

View Slide

@__xuorig__
fragment productFields on Product {
id
name
price
}

View Slide

@__xuorig__
{
myShop {
name
location {
city
address
}
...productFields
}
}
}

View Slide

@__xuorig__
query
Fragment
Fragment
Fragment Fragment

View Slide

@__xuorig__
Mutations

View Slide

@__xuorig__
mutation {
createProduct(name: “Nice Mug”, price: 10000) {
id
name
}
}

View Slide

@__xuorig__
Resolving ﬁelds

View Slide

@__xuorig__
github.com/rmosolgo/graphql-ruby

View Slide

@__xuorig__
ProductType = GraphQL::ObjectType.define do
name "Product"
description “A product sold at a shop”
# …
end

View Slide

@__xuorig__
field :name do
type types.String
resolve -> (obj, args, ctx) { obj.name }
end

View Slide

@__xuorig__
field :price do
type types.Int
resolve -> (obj, args, ctx) do
obj.subtotal + obj.taxes + obj.shipping_price
end
end

View Slide

@__xuorig__
ShopType = ObjectType.define do
name “Shop"
description "A Shop"
field :products, [ProductType]
end

View Slide

@__xuorig__
QueryType = ObjectType.define do
name “Query"
description “The Root of my Schema"
field :myShop, ShopType
end

View Slide

@__xuorig__
MySchema = GraphQL::Schema.new(
query: QueryRoot,
mutation: MutationRoot
)

View Slide

@__xuorig__
POST /graphql

View Slide

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

View Slide

@__xuorig__
module Api
class GraphqlController < ApiController
def query
# ...
result = MySchema.query(
query_string,
variables: variables,
context: context
)
render json: result
end
end
end

View Slide

@__xuorig__
Drawbacks
and solutions

View Slide

@__xuorig__
N+1 Queries

View Slide

@__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

View Slide

@__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" = …

View Slide

@__xuorig__
Solution: Batching + Caching

View Slide

@__xuorig__
field :image do
type ImageType
resolve -> (product, args, ctx) do
RecordLoader.for(Image).load(product.image_id)
end
end

View Slide

@__xuorig__
HTTP Caching

View Slide

@__xuorig__
Solution: Client Side Cache

View Slide

@__xuorig__
Normalized Cache

View Slide

@__xuorig__
query {
shop {
products {
price
}
}
}
query {
shop {
product(id: 1) {
price
}
}
}

View Slide

@__xuorig__
{
root: {
shop: {
products: [
Link.new(1)
]
}
},
1: {
price: 1000
}
}

View Slide

@__xuorig__
https://github.com/facebook/relay http://www.apollostack.com/

View Slide

@__xuorig__
Security

View Slide

@__xuorig__
Query Depth
Timeouts
Query Complexity

View Slide

@__xuorig__
Future

View Slide

@__xuorig__
Subscriptions

View Slide

@__xuorig__
subscription {
productInventorySubscribe {
products {
inventory
}
}
}

View Slide

@__xuorig__
Deferred Queries

View Slide

@__xuorig__
query {
shop {
name
description
products {
name
price
}
}
}

View Slide

@__xuorig__
query {
shop {
name
description
products @defer {
name
price
}
}
}

View Slide

@__xuorig__

View Slide

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

View Slide

@__xuorig__
Client Server
yo, give me the resource with id = 1

View Slide

@__xuorig__
oh boy :(
Client Server

View Slide

@__xuorig__
I need that exact data shape (requirements)
Here is everything you can do! (capabilities)
Client Server

View Slide

@__xuorig__
Eﬃciency

View Slide

@__xuorig__
Predictability

View Slide

@__xuorig__
Thank you!
Marc-Andre Giroux @__xuorig__

View Slide

GraphQL on Rails

GraphQL on Rails

Marc-Andre Giroux

More Decks by Marc-Andre Giroux

Other Decks in Programming

Featured

Transcript