Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
relay
Kazuhito Hokamura
May 31, 2016
Technology
2
4.5k
relay
Kazuhito Hokamura
May 31, 2016
Tweet
Share
More Decks by Kazuhito Hokamura
See All by Kazuhito Hokamura
RailsエンジニアのためのNext.js入門
hokaccha
6
9k
Cookpad Summer Internship 2021 Web Frontend
hokaccha
0
5.8k
巨大なモノリシック Rails アプリケーションの マイクロサービス化戦略 / 2019 microservices in cookpad
hokaccha
3
3.1k
巨大なRailsアプリケーションを「普通」にするための取り組み
hokaccha
1
630
Web Frontend Improvement in Cookpad
hokaccha
1
620
cookpad summer internship 2018 - Git
hokaccha
1
9.1k
cookpad summer internship 2018 - JavaScript
hokaccha
0
9k
エンジニアのアウトプットと採用 / Engineer's output and recruiting
hokaccha
0
1.4k
ログを活用したサービス開発
hokaccha
2
6.5k
Other Decks in Technology
See All in Technology
Oracle Cloud Infrastructure:2022年5月度サービス・アップデート
oracle4engineer
PRO
0
150
開発者のための GitHub Organization の安全な運用と 継続的なモニタリング
flatt_security
3
4k
BFFとmicroservicesアーキテクチャ
hirac1220
0
110
ドキュメントの翻訳に必要なこと
mayukosawai
0
190
動的ルーティング・ゲートウェイ (DRG) 概要
ocise
0
120
[SRE NEXT 2022]組織に対してSREを適用するとはどういうことか
srenext
0
520
プロダクトの理想と現実はなぜ乖離しがち?プロダクト作りに潜む問題を考える
suzukentaro
0
250
Dagu | オンプレ向けワークフローエンジン(WebUI 同梱)
yohamta
1
210
Scrum Fest Niigata 2022 開発エンジニアに聞いてみよう!
moritamasami
1
660
Building smarter apps with machine learning, from magic to reality
picardparis
4
3.1k
大きくなるチームを支える技術 / Technology to support a growing SCX team
ku00
0
140
OSS ことはじめ
hsbt
3
590
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
280
17k
Why You Should Never Use an ORM
jnunemaker
PRO
47
5.6k
Raft: Consensus for Rubyists
vanstee
126
5.4k
4 Signs Your Business is Dying
shpigford
169
20k
Reflections from 52 weeks, 52 projects
jeffersonlam
337
17k
What's new in Ruby 2.0
geeforr
336
30k
Building Adaptive Systems
keathley
25
1.1k
Put a Button on it: Removing Barriers to Going Fast.
kastner
56
2.3k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
29
4.3k
How to Ace a Technical Interview
jacobian
265
21k
WebSockets: Embracing the real-time Web
robhawkes
57
5k
Music & Morning Musume
bryan
35
4.2k
Transcript
Relay HTML5ͱ͔ษڧձ #65
@hokaccha
Relay
React
GraphQL
react-relay graphql-relay GraphQL Relay Specification
• ϑϧελοΫͳϑϨʔϜϫʔΫ • σʔλͷετΞAPIͷϋϯυϦϯάશ෦Δ • αʔόʔଆͷ༷/࣮·Ͱ͋Δ
GraphQL
GraphQLͱ • Facebook͕։ൃͨ͠ΫΤϦݴޠ • ΫϥΠΞϯτ/αʔόʔؒͷΓऔΓʹΘΕΔ • RESTRPCͱಉ͡ϨΠϠʔ
http://example.com/products/1 { "id": 1, "name": "foo", "description": "..." "image": {
"uri": "http://...", "width": 120, "height": 120 } }
http://example.com/graphql { "product" : { "id": 1, "name": "foo", "description":
"..." "image": { "uri": "http://...", "width": 120, "height": 120 } } } { product(id: 1) { id, name, description, image(size: 120) { uri, width, height } } } 3FRVFTU 3FTQPOTF
• ඞཁͳϑΟʔϧυ͚ͩΛબՄೳ • ωετͨ͠σʔλΛҰൃͰҾ͚Δ • ܕ͕͋Δ • etc..
GraphQL Relay Specification • Global Object Identification • Cursor Connections
• Input Object Mutations
Relay
• DECLARATIVE • COLOCATION • MUTATIONS
DECLARATIVE
ैདྷͷख๏ 1. Πϕϯτ͕τϦΨʔ͞ΕΔ 2. αʔόʔʹϦΫΤετ͢Δ 3. ϨεϙϯεΛݩʹViewΛ࠶ߏங͢Δ
$el.find('.select').on('change', id => { fetch(`/products/${id}`).then(product => { $('.name').text(product.name); $('.description').text(product.description); });
});
ReactΛͬͨ߹ 1. Πϕϯτ͕τϦΨʔ͞ΕΔ 2. αʔόʔʹϦΫΤετ͢Δ 3. ϨεϙϯεͷσʔλΛݩʹstateΛߋ৽͢Δ • ࣗಈͰView͕ߋ৽͞ΕΔ
class AppComponent extends React.Component { handleSelect(id) { fetch(`/products/{id}`).then(product => {
// update state }); } render() { return ( let { name, description } = this.props.app.product; <div> <ProductSelect onChange={id => this.handleSelect(id)} /> <h1>{name}</h1> <div>{description}</div> </div> ); } } ໋ྩత એݴత
RelayΛͬͨ߹ 1. Πϕϯτ͕τϦΨʔ͞ΕΔ 2. ϦΫΤετΛͭ͘ΔͨΊͷΛߋ৽͢Δ • ࣗಈͰϦΫΤετΛૹΔ • ϨεϙϯεͷσʔλΛݩʹstateΛࣗಈͰߋ৽ •
View͕ࣗಈతʹߋ৽͞ΕΔ
class AppComponent extends React.Component { handleSelect(id) { this.props.relay.setVariables({ id });
} render() { let { name, description } = this.props.app.product; return ( // Reactͷྫͱಉ༷ ); } } const AppContainer = Relay.createContainer(AppComponent, { initialVariables: { id: 1 }, fragments: { app: () => Relay.QL` fragment on App { product(id: $id) { name, description } } `, }, }); એݴత
COLOCATION
query BlogApp { post { title body author { name
} comments { body user { name } } } }
<Post> <PostHeader /> <PostBody /> <Comment> <CommentForm /> <CommentList />
</Comment> </Post>
query PostApp { ...post } fragment post on Post {
titlt body author { ...user } comments { ...comment } } fragment comment on Comment { body user { ...user } } fragment user on User { name }
class PostComponent extends React.Component { //... } export default Relay.createContainer(PostComponent,
{ fragments: { post: () => Relay.QL` fragment on Post { id, title, body author { ${Author.getFragment('user')} } comments { ${Comment.getFragment('comment')} } } ` } });
• ίϯϙʔωϯτʹඞཁͳσʔλ͕Ұྎવ • ΫΤϦΛׂͯ͠࠶ར༻Ͱ͖Δ • ඞཁͳσʔλ͚͍͍ͩײ͡ʹϦΫΤετͯ͠ ͘ΕΔ
Relay.QL
Relay.createContainer(PostComponent, { fragments: { post: () => Relay.QL` fragment on
Post { id title body author { ${Author.getFragment('user')} } comments { ${Comment.getFragment('comment')} } } ` } });
None
babelRelayPlugin.js var getbabelRelayPlugin = require('babel-relay-plugin'); var schema = require('../data/schema.json'); module.exports
= getbabelRelayPlugin(schema.data);
type Query { post: Post } type Post { id:
ID! title: String! body: String author: User comments: [Comment] } type Comment { text: String! user: User } type User { name: String! }
• ίϯύΠϧ࣌ʹϦΫΤετͷܕνΣοΫ͕Δ • αʔόʔଆͱͷσʔλͷෆ߹Λ࣮ߦલʹ͛Δ
RelayͷͭΒΈ
• GraphQL/Reactͷ͕ࣝલఏ • babelΛͬͨϏϧυڥඞਢ • React΄ͲγϯϓϧͰͳ͍ • ͪΐͬͱࢼ͚ͩ͢Ͱෑډߴ͍ • ݱ࣌ͰࢿྉࢀߟΞϓϦ͕ઈతʹগͳ͍
Relayͷظ
• ·͞ʹϑϧελοΫͳϑϨʔϜϫʔΫ • ࣍ੈͷRailsʹͳΕΔՄೳੑ͕ඍϨଘɾɾʁ
fin.