javascript - 无法从 Github 的 GraphQL 渲染嵌套 Prop

Question

我正在尝试获取一些 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 中的一些属性丢失了。

Answer 1

您不必访问片段的变量，而是通过在您的App 中使用this.props.relay.repository 来访问查询响应> 组件。

例如，映射所有问题:

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