Troubled Relay container subtree

01_Article.jsx

// Article.jsx

import React from "react";
import { createFragmentContainer, graphql } from "react-relay";
import CommentList from "./CommentList.jsx";


class Article extends React.Component {
  render() {
    return (
      <div className="ArticleWithComments">
        <div className="Article">
          <div className="ArticleImageContainer">
            <img src={this.props.article.image_url} />
          </div>
          <h2>{this.props.article.headline}</h2>
          <h3>{this.props.article.subhed}</h3>
          <p>by {this.props.article.authors.edges.map(edge => edge.node.name).join(" and ")}</p>
          <p>{(new Date(parseInt(this.props.article.publication_time, 10))).toDateString()}</p>
          <p>{this.props.article.body}</p>
        </div>
        <div className="CommentsContainer">
          <h4>Commentary</h4>
          <CommentList comments={this.props.article.comments} />
        </div>
      </div>
    );
  }
}


export default createFragmentContainer(
  Article,
  graphql`
    fragment Article_article on Article {
      id
      image_url
      headline
      subhed
      publication_time
      body
      authors {
        edges {
          node {
            name
            email
          }
        }
      }
      comments {
        ...CommentList_comments
      }
    }
);

02_CommentList.jsx

// CommentList.jsx

import React from "react";
import { createFragmentContainer, graphql } from "react-relay";
import "./CommentList.css";
import Comment from "./Comment.jsx";

class CommentList extends React.Component {
  render () {
    return (
      <ul className="CommentList">
        {this.props.comments.edges.map(edge => {
          <li className="Comment" key={edge.node.id}><Comment comment={edge.node} /></li>
        })}
      </ul>
    )
  }
}

export default createFragmentContainer(
  CommentList,
  graphql`
    fragment CommentList_comments on CommentConnection {
      edges {
        node {
          id
          ...Comment_comment 
        }
      }
    }
  `
)

03_Comment.jsx

// Comment.jsx

import React from "react";
import { createFragmentContainer, graphql } from "react-relay";

class Comment extends React.Component {
  render() {
    const { body, publication_time, author } = this.props.comment;
    return (
      <div className="Comment">
        <p className="CommentBody">{body}</p>
        <p className="PublicationTime">&mdash;{author.name}&nbsp;&mdash;&nbsp;{(new Date(parseInt(publication_time, 10))).toDateString()}</p>
      </div>
    )
  }
}

export default createFragmentContainer(
  Comment,
  graphql`
    fragment Comment_comment on Comment {
      body
      publication_time
      author {
        name
      }
    }
  `
)