impossible de rendre les accessoires imbriqués à partir de Github GraphQL

Question

Je tente d'aller chercher certains de Github's GraphQL data et de l'afficher en utilisant React & Relay. Les deux problèmes que j'ai sont qu'il semble relais ajoute des alias à la réponse (ce qui rend difficile à référencer), et pas tous les éléments demandés sont passés dans mon composant props. Dans le code ci-dessous je peux rendre this.props.relay.variables.name mais obtenir indéfini en essayant de boucler sur 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> 
 
    ); 
 
    } 
 
}

Dans l'aperçu de la réponse, il semble que je récupère avec succès les données spécifiées.

Mais quand je journal de la console this.props certaines propriétés de la récupération manquent.

Answer 1

lieu d'accéder au variables du fragment que vous devez accéder à la réponse à la requête en utilisant this.props.relay.repository dans yout composant App.

Par exemple, pour la carte sur toutes les questions:

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