CODEWITHSUNDEEP
javascriptreactjsgithub-apigraphqlrelayjs
remainstheday
remainstheday

Reputation: 464

unable to render nested props from Github's GraphQL

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.

github graphQL response object

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

result after console logging this.props

Upvotes: 3

Views: 219

Answers (1)

marktani
marktani

Reputation: 7808

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>

Upvotes: 1

Related Questions