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

Posted 2023-03-08

【中文标题】无法从 Github 的 GraphQL 渲染嵌套道具

【英文标题】：unable to render nested props from Github's GraphQL

【发布时间】：2017-05-03 19:23:06

【问题描述】：

我正在尝试获取一些Github's GraphQL data 并使用 React & Relay 显示它。我遇到的两个问题是，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 时，获取的某些属性丢失了。

【参考方案1】：

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

例如，映射所有问题：

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

【讨论】：

这是有道理的，但我仍然收到TypeError: Cannot read property 'issues' of undefined。这可能与我的反应得到别名有关吗？ "data":"relay":"_repository41jr1f":我不确定为什么某些属性会发生这种情况。

您是尝试访问 Relay 容器上的数据还是内部组件中的数据？根据您的输出，您似乎尝试在它不属于的 Relay 容器中访问它。查询完成后，Relay 容器将数据作为 props 传递给内部组件。