unable to render nested props from Github's GraphQL

Question

I am attempting to fetch some of Github's GraphQL data and display it using React & Relay. The two problems I have are that it appears relay is adding aliases to the response (making it difficult to reference), and not all the item's queried are getting passed into my component props. In the code below I can render this.props.relay.variables.name but get undefined when trying to loop over this.props.relay.variables.issues

// AppQuery.js
import Relay from 'react-relay'
export default {
  relay : Component => Relay.QL `
    query {
      relay {
        ${Component.getFragment('relay')}
      }
    }
  `
};

// AppContainer.js
import Relay from 'react-relay'
import App from './AppComponent'

export default Relay.createContainer(App, {
  initialVariables: {
    owner: "rails",
    name: "rails",
    count: 10
  },
  fragments: {
    relay: () => Relay.QL `
      fragment on Query {
        repository(owner: $owner, name: $name) {
          name
          owner
          description
          issues(first: 20) {
            edges {
              node {
                title
              }
            }
          }
        }
      }`
  }
});

//AppComponent.js
export default class App extends React.Component {
  render() {
    return (
      <div>
        <h1>{this.props.relay.variables.name}</h1>
        <ul>
          { this.props.relay.variables.issues.edges.map((issue) => {
            return(<li>{issue.node.title}</li>)
          })}
        </ul>
      </div>
    );
  }
}

In the response preview it appears that I am successfully fetching the specified data.

But when I console log this.props some properties from the fetch are missing.

Answer 1

Instead of accessing the variables of the fragment you have to access the query response by using this.props.relay.repository in yout App component.

For example, to map over all issues:

<ul>
  { this.props.relay.repository.issues.edges.map((issue) => {
    return(<li>{issue.node.title}</li>)
  })}
</ul>