GraphQL Example (Medium Teaser)

graphql-example-medium-teaser.jsx

class LiveView extends React.Component {
  render () {
    const { contributor } = this.props;
    return (
      <div>
        <h1>Hello {contributor.name}!</h1>
          {contributor.novels.edges.map(edge => (
            <Novel key={edge.node.id} novel={edge.node}/>
          ))}
      </div>
    );
  }
}

export default Relay.createContainer(LiveView, {
  fragments: {
    contributor: () => Relay.QL`
      fragment on Contributor {
        id
        name
        novels(last: 1) { # get the most recent novel
          edges {
            node {
              id
              ${Novel.getFragment('novel')}
            }
          }
        }
      }
    `
  }  
});

class Novel extends React.Component {
  render () {
    const { novel } = this.props;
    return (
      <div>
        <h3>{novel.title}</h3>
        {novel.chapters.edges.map(edge => (
          <Chapter key={edge.node.id} chapter={edge.node}/>
        ))}
      </div>
    );
  }
}

export default Relay.createContainer(Novel, {
  fragments: {
    novel: () => Relay.QL`
      fragment on Novel {
        id
        title
        chapters(first: 10) {
          edges {
            node {
              id
              ${Chapter.getFragment('chapter')}
            }
          }
        }
      }
    `
  }
});