我正在尝试获取一些 Github's GraphQL data并使用 React & Relay 显示它。我遇到的两个问题是中继似乎正在向响应添加别名(使其难以引用),并且并非所有查询的项目都被传递到我的组件 props
中。在下面的代码中,我可以呈现 this.props.relay.variables.name
但在尝试遍历 this.props.relay.variables.issues
时得到 undefined
// 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
时,fetch 中的一些属性丢失了。
最佳答案
您不必访问片段的变量
,而是通过在您的App
中使用this.props.relay.repository
来访问查询响应> 组件。
例如,映射所有问题:
<ul>
{ this.props.relay.repository.issues.edges.map((issue) => {
return(<li>{issue.node.title}</li>)
})}
</ul>
关于javascript - 无法从 Github 的 GraphQL 渲染嵌套 Prop ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41210780/