relay

Transcript

1. Relay HTML5ͱ͔ษڧձ #65
2. @hokaccha
3. Relay
4. React
5. GraphQL
6. react-relay graphql-relay GraphQL Relay Specification
7. • ϑϧελοΫͳϑϨʔϜϫʔΫ • σʔλͷετΞ΍APIͷϋϯυϦϯά΋શ෦΍Δ • αʔόʔଆͷ࢓༷/࣮૷·Ͱ͋Δ
8. GraphQL
9. GraphQLͱ͸ • Facebook͕։ൃͨ͠ΫΤϦݴޠ • ΫϥΠΞϯτ/αʔόʔؒͷ΍ΓऔΓʹ࢖ΘΕΔ • REST΍RPCͱಉ͡ϨΠϠʔ
10. http://example.com/products/1 { "id": 1, "name": "foo", "description": "..." "image": { "uri": "http://...", "width": 120, "height": 120 } }
11. 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
12. • ඞཁͳϑΟʔϧυ͚ͩΛબ୒Մೳ • ωετͨ͠σʔλΛҰൃͰҾ͚Δ • ܕ͕͋Δ • etc..
13. GraphQL Relay Specification • Global Object Identification • Cursor Connections • Input Object Mutations
14. Relay
15. • DECLARATIVE • COLOCATION • MUTATIONS
16. DECLARATIVE
17. ैདྷͷख๏ 1. Πϕϯτ͕τϦΨʔ͞ΕΔ 2. αʔόʔʹϦΫΤετ͢Δ 3. ϨεϙϯεΛݩʹViewΛ࠶ߏங͢Δ
18. $el.find('.select').on('change', id => { fetch(`/products/${id}`).then(product => { $('.name').text(product.name); $('.description').text(product.description); }); });
19. ReactΛ࢖ͬͨ৔߹ 1. Πϕϯτ͕τϦΨʔ͞ΕΔ 2. αʔόʔʹϦΫΤετ͢Δ 3. ϨεϙϯεͷσʔλΛݩʹstateΛߋ৽͢Δ • ࣗಈͰView͕ߋ৽͞ΕΔ
20. 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> ); } } ໋ྩత એݴత
21. RelayΛ࢖ͬͨ৔߹ 1. Πϕϯτ͕τϦΨʔ͞ΕΔ 2. ϦΫΤετΛͭ͘ΔͨΊͷ஋Λߋ৽͢Δ • ࣗಈͰϦΫΤετΛૹΔ • ϨεϙϯεͷσʔλΛݩʹstateΛࣗಈͰߋ৽ • View͕ࣗಈతʹߋ৽͞ΕΔ
22. 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 } } `, }, }); એݴత
23. COLOCATION
24. query BlogApp { post { title body author { name } comments { body user { name }
 } } }
25. <Post> <PostHeader /> <PostBody /> <Comment> <CommentForm /> <CommentList /> </Comment> </Post>
26. 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
 }
27. 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')} } } ` } });
28. • ίϯϙʔωϯτʹඞཁͳσʔλ͕Ұ໨ྎવ • ΫΤϦΛ෼ׂͯ͠࠶ར༻Ͱ͖Δ • ඞཁͳσʔλ͚͍͍ͩײ͡ʹϦΫΤετͯ͠ ͘ΕΔ
29. Relay.QL
30. Relay.createContainer(PostComponent, { fragments: { post: () => Relay.QL` fragment on Post { id title body author { ${Author.getFragment('user')} } comments { ${Comment.getFragment('comment')} } } ` } });
32. babelRelayPlugin.js var getbabelRelayPlugin = require('babel-relay-plugin'); var schema = require('../data/schema.json'); module.exports = getbabelRelayPlugin(schema.data);
33. 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! }
34. • ίϯύΠϧ࣌ʹϦΫΤετͷܕνΣοΫ͕૸Δ • αʔόʔଆͱͷσʔλͷෆ੔߹Λ࣮ߦલʹ๷͛Δ
35. RelayͷͭΒΈ
36. • GraphQL/Reactͷ஌͕ࣝલఏ • babelΛ࢖ͬͨϏϧυ؀ڥඞਢ • React΄ͲγϯϓϧͰ͸ͳ͍ • ͪΐͬͱࢼ͚ͩ͢Ͱ΋ෑډߴ͍ • ݱ࣌఺Ͱ͸ࢿྉ΍ࢀߟΞϓϦ͕ઈ๬తʹগͳ͍
37. Relay΁ͷظ଴
38. • ·͞ʹϑϧελοΫͳϑϨʔϜϫʔΫ • ࣍ੈ୅ͷRailsʹͳΕΔՄೳੑ͕ඍϨଘɾɾʁ
39. fin.