GraphQL on Rails by 夏俊晨@Strikingly

AirJD

没有录音文件

00:00/00:00

加收藏

GraphQL on Rails by 夏俊晨@Strikingly

发布者 ruby

发布于 1448587552205 浏览 6301 关键词 Ruby, NoSQL

分享到

第1页

GraphQL on Rails

, Strikingly twitter: @xjconlimii github.com/onlimii

第3页

GraphQL?

第4页

GraphQL Facebook

3 260

第5页

GraphQL SQL

第6页

GraphQL RESTful API

第7页

RESTful API

第8页

Roundtrips

/api/v1/site/:id

/api/v1/site/:id/analytics

endpoint

第9页

Data Over-fetching

{ “data”: { “id”: 123, “title”: “Growth…”, “permalink”: “mirandakerr”, “createdAt”: “some time”, “updatedAt”: “another time”, “picture”: “//image.png”, “description”: “…”, “notes”: “…”, “state”: “published”, “screenshot_url”: “…”, “isRetired”: false, … }

}

第10页

Version Hell

Server

FFeFeaFeaFteauFteauFtreautereauteraute1rute1r(ue1rv(e1rv(6e1v(6)1v(6)1v(6)v(6)v6)F6)Fe)FeaFeaFteauFteauFtreautereauteraute1rute1r(ue1rv(e1rv(6e1v(6)1v(6)2v(6)v(6)v6)6F)F)eFeaFeaFteauFteauFtreautereauteraute1rute1r(ue1rv(e1rv(6e1v(6)1v(6)3v(6)v(6)v6)6) )

Feature 1(v6)

Feature 2(v6)

CClileienntt

Feature 3(v6)

第12页

“The REST interface is designed to be efﬁcient for large-grain hypermedia data transfer…”

- Dr Roy T Fielding, Author of REST

REST

第13页

第14页

GraphQL RESTful API

第15页

{ me { name }

}

{ “me”: { “name”: “Junchen Xia” }

}

第16页

{ user(id: 1) { name }

}

第17页

{{

me {

“me”: {

name

“name”: “Junchen Xia”,

picture(size: 300) { “picture”: {

height

“height”: 300,

width

“width”: 300,

url “url”: “//image.png”

}}

}}

}}

第18页

alias

{ me { name smallPic: picture(size: 50) { height width url } bigPic: picture(size: 300) { height width url } }

}

{ “me”: { “name”: “Junchen Xia”, “smallPic”: { “height”: 50, “width”: 50, “url”: “//image.png” }, “bigPic”: { “height”: 300, “width”: 300, “url”: “//bigimage.png” } }

}

第19页

one to many

{ me { name friends { name } }

}

{ “me”: { “name”: “Junchen Xia”, “friends”: [ { “name”: “AAA” }, { “name”: “BBB” } ] }

}

第20页

{ Fragment

me { name smallPic: picture(size: 50) {

…pictureParam

} bigPic: picture(size: 300) {

…pictureParam

} } }

fragment pictureParam on picture { height width url

}

第21页

{ query

object

me { name

ﬁeld

picture {

object

height

width

url

}

}

}

第22页

{ me { name picture { height width url } }

}

type Query { me: User user(id: Int): User

}

第23页

{ me { name picture { height width url } }

}

type User { name: String picture(size: Int=50): Picture

}

第24页

{ me { name picture { height width url } }

}

type Picture { height: Int width: Int url: String format: String

}

第25页

Resolver

type User { name: String picture(size: Int=50): Picture

}

{ name(user) { user.name } picture(user, {size}) { user.picture(size) }

}

第26页

Resolver

type User { name: String picture(size: Int=50): Picture

}

{ name(user) { user.name } picture(user, {size}) { user.picture(size) }

}

第27页

Resolver

type User { name: String picture(size: Int=50): Picture

}

{ name(user) { user.name } picture(user, {size}) { user.picture(size) }

}

第28页

V3 V2 V1

Server

REST

/api/v1/pages/1 page, V1

/api/v2/pages/1 page, V2

/api/v3/pages/3 page, V3

V3 V2 V1

Client

第29页

Server

GraphQL

page data V1 data V1

page data V2 data V2

page data V3 data V3

V3 V2 V1

Client

第30页

Big Picture

Server

Client

UI

第32页

Introspection

{ __schema{ types{ name fields{ name type { name } } } }

}

{ "data": { "__schema": { "types": [ { "name": "Query", "fields": [ { "name": "user", "type": { "name": "User" } …

}

第33页

Introspection

1. API 2.

第35页

GraphQL Server

第36页

GraphQL

Graphql-ruby ?

第37页

1. query

2.

object, ﬁeld

resolver

第38页

DEMO

第39页

HOWTO

1. Graphiql!

2. Route

GraphQL endpoint

3. schema

4. query type

5. business objects

第40页

GraphQL endpoint

class GraphqlController < ApplicationController def query render json: Schema.execute( params[:query], variables: params[:variables] || {} ) end

end

第41页

GraphQL endpoint

class GraphqlController < ApplicationController def query render json: Schema.execute( params[:query], variables: params[:variables] || {} ) end

end

第42页

schema

Schema = GraphQL::Schema.new(query: QueryType)

第43页

query type

QueryType = GraphQL::ObjectType.define do name "Query" description "The query root for this schema"

field :user do type UserType argument :email, types.String argument :id, types.ID

resolve -> (obj, args, ctx) do if args['id'] User.find(args['id']) else User.find_by(email: args['email']) end

end end end

第44页

第45页

第46页

第47页

第48页

query type

QueryType = GraphQL::ObjectType.define do name "Query" description "The query root for this schema"

field :user do type UserType argument :email, types.String argument :id, types.ID

resolve -> (obj, args, ctx) do if args['id'] User.find(args['id']) elsif args[‘email’] User.find_by(email: args['email']) end

end end end

第49页

business objects

UserType = GraphQL::ObjectType.define do name 'User' description 'A user' field :id, !types.ID field :name, types.String, property: :name field :email, types.String, property: :email field :picture, types.Picture, property: :picture

end

resolve -> (o, a, c) { o.public_send(property)

}

第50页

REST API

GraphQL

第51页

One more thing

第52页

GraphQL Mutation!

第53页

mutation { changePicture(picture: p){ me { picture { url } } }

}

第54页

ecosystem

第55页

1. graphql https://github.com/facebook/graphql 2. graphql-ruby https://github.com/rmosolgo/graphql-ruby 3. graphql-js https://github.com/graphql/graphql-js 4. graphql awesome list https://github.com/chentsulin/

awesome-graphql

第56页

1. 2. 3. 4. 5. application 6. REST API

REST

第57页

Q&A