react-bug-6232.js

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

const pageSize = 30;

class Home extends React.Component {
  constructor(props){
    super(props);
    this.renderRow = this.renderRow.bind(this);
  }

  renderRow(key, index) {
    var posts = this.props.viewer.latestPosts.edges;

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

    var post = posts[index].node;
    return (
      <div key={ key } className="list-group-item">
        { post.title }</Link>
      </div>
    );
  }

  render() {
    var latestPosts = this.props.viewer.latestPosts;
    return (
      <div className="list-group">
        <ReactList itemRenderer={ this.renderRow } length={ latestPosts.edges.length }/>
      </div>
    );
  }

export default Relay.createContainer(Home, {
  initialVariables: {
    pageSize: pageSize
  },
  fragments: {
    viewer: () => Relay.QL`
      fragment on Viewer {
        id,
        latestPosts(first: $pageSize) {
          edges {
            node {
              title,
            },
          },
        },
      }
    `,
  },
});