Upgrade to Pro — share decks privately, control downloads, hide ads and more …

instant learning graphql and relay

instant learning graphql and relay

シュッとーく #01
(永和社内イベント)

Fumiaki MATSUSHIMA

February 16, 2017
Tweet

More Decks by Fumiaki MATSUSHIMA

Other Decks in Programming

Transcript

  1. /users [ { id: 1 tweets: [ {id: 1, body:

    ‘hi’}, {id: 2, body: ‘bye’}, ] }, { id: 2 ...
  2. class Tweet extends React.Component { render () { return (

    <div>{this.props.tweet.body}</div> ) } }
  3. class Tweet extends React.Component { render () { return (

    <div>{this.props.tweet.body}</div> ) } } Relay.createContainer(Tweet, { fragments: { tweet: () => Relay.QL` fragment on Tweet { body } ` } }
  4. class App extends React.Component { render () { return (

    <Tweet tweet={this.props.tweet} /> ) } } Relay.createContainer(App, { fragments: { tweet: () => Relay.QL` fragment on Tweet { ${Tweet.getFragment(‘tweet’) } ` } }
  5. query { users { tweets( first: 5, after: ‘RmFjdGlvbjox’ )

    { edges { node { id, body } pageInfo { hasNextPage } } } }
  6. query { users { tweets( first: 5, after: ‘RmFjdGlvbjox’ )

    { edges { node { id, body } pageInfo { hasNextPage } } } }
  7. GraphQL/Relay によって - クライアント N+1 が解消する - クライアント(コンポーネント)が必要なものを 自分で宣言して取ってこれる -

    リクエストを投げて Store に放り込んでコン ポーネントに繋げるまでを考える戦いに終止 符が打たれる - Schema による秩序が靠らされる