无法从Github的GraphQL渲染嵌套的道具

Question

我正在尝试取一些Github's GraphQL data并使用React＆amp; amp;显示它中继。我遇到的两个问题是，似乎relay正在为响应添加别名（使其难以引用），并且查询的所有项目都不会传递到我的组件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时，缺少了一些来自fetch的属性。

Answer 1

您必须使用variables组件中的this.props.relay.repository来访问查询响应，而不是访问片段的App。

例如，要映射所有问题：

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