relay-new-candidates-component.jsx

import Relay from "react-relay";
import React from "react";
import ReactList from "react-list";

const pageSize = 30;

class NewCandidates extends React.Component {

  constructor(props){
    super(props);
    this.renderRow = this.renderRow.bind(this);
  }

  renderRow(key, index) {
    var candidates = this.props.viewer.newCandidates.edges;

    // End of the list reached. Increase page size. Relay
    // will fetch only the required data to fill the new
    // page size.
    if (index === candidates.length - 1) {
      this.props.relay.setVariables({
        pageSize: candidates.length + pageSize
      });
    }

    var candidate = candidates[index].node;
    return (
      <li key={ key }> Id: { candidate.recordId }, Name: { candidate.name }</li>
    );
  }

  render() {
    var candidates = this.props.viewer.newCandidates;
    return (
      <ul style={{ height: 200, overflowY: "scroll"}}>
        <ReactList itemRenderer={ this.renderRow} length={ candidates.edges.length }/>
      </ul>
    );
  }
}

export default Relay.createContainer(NewCandidates, {
  initialVariables: {
    pageSize: pageSize
  },
  fragments: {
    viewer: () => Relay.QL`
      fragment on User {
        newCandidates(first: $pageSize) {
          edges {
            node {
              recordId,
              name
            }
          }
        }
      }
    `
  }
});