relay

Transcript

1. Relay Meguro.es #3

2. @hokaccha

3. Relay

4. React

5. GraphQL

6. None

7. GraphQL

8. GraphQLͱ͸ • Facebook͕։ൃͨ͠ΫΤϦݴޠ • ΫϥΠΞϯτ/αʔόʔؒͷ΍ΓऔΓʹ࢖ΘΕΔ • REST΍RPCͱൺֱ͞ΕΔ

9. http://example.com/products/1 { "id": 1, "name": "foo", "description": "..." "image": {

   "uri": "http://...", "width": 120, "height": 120 } }

10. 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

11. ଓ͖͸WebͰ http://graphql.org/

12. Relay

13. A JavaScript framework for building data-driven React Applications

14. ैདྷͷख๏ 1. Πϕϯτ͕τϦΨʔ͞ΕΔ 2. αʔόʔʹϦΫΤετ͢Δ 3. ϨεϙϯεΛݩʹViewΛ࠶ߏங͢Δ

15. $el.find('.select').on('selectProduct', id => { fetch(`/products/${id}`).then(product => { $('.name').text(product.name); $('.description').text(product.description); });

    });

16. ReactΛ࢖ͬͨ৔߹ 1. Πϕϯτ͕τϦΨʔ͞ΕΔ 2. αʔόʔʹϦΫΤετ͢Δ 3. ϨεϙϯεͷσʔλΛݩʹstateΛߋ৽͢Δ • ࣗಈͰView͕ߋ৽͞ΕΔ

17. 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> ); } } ໋ྩత એݴత

18. RelayΛ࢖ͬͨ৔߹ 1. Πϕϯτ͕τϦΨʔ͞ΕΔ 2. ϦΫΤετΛͭ͘ΔͨΊͷ஋Λߋ৽͢Δ • ࣗಈͰϦΫΤετΛૹΔ • ϨεϙϯεͷσʔλΛݩʹstateΛࣗಈͰߋ৽ •

    View͕ࣗಈతʹߋ৽͞ΕΔ

19. 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 } } `, }, }); એݴత

20. ଞʹ΋ɾɾɾ • ΫΤϦͷߏ଄Խ • ΫΤϦͷ੩తܕνΣοΫ • σʔλͷߋ৽ • ϩʔσΟϯάͷ੍ޚ •

    Ωϟογϡ • ϖʔδωʔγϣϯ • ͳͲͳͲ੝Γͩ͘͞Μ

21. RelayͷͭΒ͍ͱ͜Ζ

22. • GraphQL/Reactͷ஌͕ࣝલఏ • babelΛ࢖ͬͨϏϧυ؀ڥඞਢ • React΄ͲγϯϓϧͰ͸ͳ͍ • ͪΐͬͱࢼ͚ͩ͢Ͱ΋ෑډߴ͍ • ݱ࣌఺Ͱ͸ࢿྉ΍ࢀߟΞϓϦ͕ઈ๬తʹগͳ͍

23. fin.