graphql.js

import * from 'react';

export function mapNodes(connection, fn) {
  return connection.edges.map(({ node }) => fn(node));
}

export function withLoading(Component) {
  return (props) => {
    if (props.data.loading) {
      return <div>Loading...</div>;
    }

    return <Component {...props} />;
  }
}

LoadMoreButton.js

class LoadMoreButton extends React.Component {
  render() {
    const { data, path, children, ...otherProps } = this.props; 
 
    return (
      <button {...otherProps} onClick={this.onClick}>
        {children || 'Load more'}
      </button>
    );
  }

  onClick = () => {
    loadMore(this.props.data, this.props.path);
  }
}

PostsPage.js

import * from react;
import LoadMoreButton from 'LoadMoreButton';
import QUERY from './Query.graphql';
import { withLoading, mapNodes } from 'graphql';
import { graphql, compose } from 'react-apollo';

export function Content({ data }) {
  return (
    <div>
      <h1>Posts</h1>
      <div>
        {mapNodes(data.allPosts, post => <PostItem key={post.id} post={post} />)}
      </div>
      <LoadMoreButton data={data} path="allPosts" />
    </div>
  );
}

export default compose(
  graphql(QUERY),
  withLoading,
)(Content);