relay

Transcript

1. Relay
   HTML5ͱ͔ษڧձ #65
   

   View Slide

2. @hokaccha
   

   View Slide

3. Relay
   

   View Slide

4. React
   

   View Slide

5. GraphQL
   

   View Slide

6. react-relay graphql-relay
   GraphQL Relay Specification
   

   View Slide

7. • ϑϧελοΫͳϑϨʔϜϫʔΫ
   • σʔλͷετΞ΍APIͷϋϯυϦϯά΋શ෦΍Δ
   • αʔόʔଆͷ࢓༷/࣮૷·Ͱ͋Δ
   

   View Slide

8. GraphQL
   

   View Slide

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

   View Slide

10. http://example.com/products/1
    {
    "id": 1,
    "name": "foo",
    "description": "..."
    "image": {
    "uri": "http://...",
    "width": 120,
    "height": 120
    }
    }
    

    View Slide

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
    

    View Slide

12. • ඞཁͳϑΟʔϧυ͚ͩΛબ୒Մೳ
    • ωετͨ͠σʔλΛҰൃͰҾ͚Δ
    • ܕ͕͋Δ
    • etc..
    

    View Slide

13. GraphQL Relay Specification
    • Global Object Identification
    • Cursor Connections
    • Input Object Mutations
    

    View Slide

14. Relay
    

    View Slide

15. • DECLARATIVE
    • COLOCATION
    • MUTATIONS
    

    View Slide

16. DECLARATIVE
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

20. class AppComponent extends React.Component {
    handleSelect(id) {
    fetch(`/products/{id}`).then(product => {
    // update state
    });
    }
    render() {
    return (
    let { name, description } = this.props.app.product;
    
    this.handleSelect(id)} />
    {name}
    {description}
    
    );
    }
    }
    ໋ྩత
    એݴత
    

    View Slide

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

    View Slide

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

    View Slide

23. COLOCATION
    

    View Slide

24. query BlogApp {
    post {
    title
    body
    author {
    name
    }
    comments {
    body
    user {
    name
    }

    }
    }
    }
    

    View Slide

25. 
    
    
    
    
    
    
    
    

    View Slide

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

    }
    

    View Slide

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')}
    }
    }
    `
    }
    });
    

    View Slide

28. • ίϯϙʔωϯτʹඞཁͳσʔλ͕Ұ໨ྎવ
    • ΫΤϦΛ෼ׂͯ͠࠶ར༻Ͱ͖Δ
    • ඞཁͳσʔλ͚͍͍ͩײ͡ʹϦΫΤετͯ͠
    ͘ΕΔ
    

    View Slide

29. Relay.QL
    

    View Slide

30. Relay.createContainer(PostComponent, {
    fragments: {
    post: () => Relay.QL`
    fragment on Post {
    id
    title
    body
    author {
    ${Author.getFragment('user')}
    }
    comments {
    ${Comment.getFragment('comment')}
    }
    }
    `
    }
    });
    

    View Slide

31. View Slide

32. babelRelayPlugin.js
    var getbabelRelayPlugin = require('babel-relay-plugin');
    var schema = require('../data/schema.json');
    module.exports = getbabelRelayPlugin(schema.data);
    

    View Slide

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!
    }
    

    View Slide

34. • ίϯύΠϧ࣌ʹϦΫΤετͷܕνΣοΫ͕૸Δ
    • αʔόʔଆͱͷσʔλͷෆ੔߹Λ࣮ߦલʹ๷͛Δ
    

    View Slide

35. RelayͷͭΒΈ
    

    View Slide

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

    View Slide

37. Relay΁ͷظ଴
    

    View Slide

38. • ·͞ʹϑϧελοΫͳϑϨʔϜϫʔΫ
    • ࣍ੈ୅ͷRailsʹͳΕΔՄೳੑ͕ඍϨଘɾɾʁ
    

    View Slide

39. fin.
    

    View Slide