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
April 19, 2016
Technology
0
510
relay
Kazuhito Hokamura
April 19, 2016
Tweet
Share
More Decks by Kazuhito Hokamura
See All by Kazuhito Hokamura
hokaccha
3
2.7k
hokaccha
0
480
hokaccha
1
450
hokaccha
1
8.9k
hokaccha
0
8.8k
hokaccha
0
1.1k
hokaccha
2
6.2k
hokaccha
4
4.7k
hokaccha
0
370
Other Decks in Technology
See All in Technology
mmarukaw
0
1.4k
kurotanshi
0
170
fujiihda
8
920
neo_analytics
0
1k
line_developers
PRO
0
140
hsano
0
120
tsuyo
0
180
osonoi
0
160
comucal
PRO
0
410
pinboro
1
1.4k
yuuturn
1
130
kaga
0
190
Featured
See All Featured
lara
16
2.6k
chriscoyier
145
19k
michaelherold
225
8.5k
keathley
17
630
pedronauck
652
110k
afnizarnur
176
14k
holman
461
280k
thoeni
4
550
roundedbygravity
241
21k
robhawkes
52
2.8k
shpigford
165
19k
paulrobertlloyd
71
1.4k
Transcript
Relay Meguro.es #3
@hokaccha
Relay
React
GraphQL
None
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
ଓ͖WebͰ http://graphql.org/
Relay
A JavaScript framework for building data-driven React Applications
ैདྷͷख๏ 1. Πϕϯτ͕τϦΨʔ͞ΕΔ 2. αʔόʔʹϦΫΤετ͢Δ 3. ϨεϙϯεΛݩʹViewΛ࠶ߏங͢Δ
$el.find('.select').on('selectProduct', 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 onSelect={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 } } `, }, }); એݴత
ଞʹɾɾɾ • ΫΤϦͷߏԽ • ΫΤϦͷ੩తܕνΣοΫ • σʔλͷߋ৽ • ϩʔσΟϯάͷ੍ޚ •
Ωϟογϡ • ϖʔδωʔγϣϯ • ͳͲͳͲΓͩ͘͞Μ
RelayͷͭΒ͍ͱ͜Ζ
• GraphQL/Reactͷ͕ࣝલఏ • babelΛͬͨϏϧυڥඞਢ • React΄ͲγϯϓϧͰͳ͍ • ͪΐͬͱࢼ͚ͩ͢Ͱෑډߴ͍ • ݱ࣌ͰࢿྉࢀߟΞϓϦ͕ઈతʹগͳ͍
fin.