GithubのGraphQLからネストされた小道具をレンダリングできません

Question

Github's GraphQL dataの一部を取得しようとしていて、それをReact & Relayを使用して表示しようとしています。私が持っている2つの問題は、リレーがレスポンスにエイリアスを追加している（参照が難しくなっている）ようだということです。クエリされたアイテムのすべてが私のコンポーネントpropsに渡されるわけではありません。コードでは、以下の私はthis.props.relay.variables.nameをレンダリングするが、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> 
 
    ); 
 
    } 
 
}

をループしようとすると未定義得ることができます応答プレビューで

私が成功し、指定されたデータをフェッチしていますことが表示されます。

しかし、ときに私はフェッチからthis.propsいくつかのプロパティが欠落しているログコンソール。代わりにあなたがyoutはAppコンポーネントでthis.props.relay.repositoryを使用して、クエリ応答にアクセスする必要がフラグメントのvariablesにアクセスする

Answer 1

。例えば

、すべての問題に対するマッピングする：

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