AirJD 焦点
AirJD

没有录音文件
00:00/00:00
加收藏

GraphQL on Rails by 夏俊晨@Strikingly

发布者 ruby
发布于 1448587552205  浏览 2870 关键词 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 efficient for large-grain hypermedia data transfer…”

- Dr Roy T Fielding, Author of REST

REST



第13页

UI



第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



field



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, field



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页

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



第45页

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



第46页

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



第47页

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



第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



支持文件格式:*.ppt, *.pptx, *.pdf
上传最后阶段需要进行在线转换,可能需要1~2分钟,请耐心等待。