渲染中继React中的现代碎片

问题描述：

我似乎无法获得在用户界面中显示的“计数”数据。我确定我错过了在同一个容器中使用两个片段或渲染边缘数组或异步的东西，也许。显示除{this.props.link.votes.count}之外的所有其他数据，它在用户界面中显示为空，同时在开发工具中的服务器或客户端上没有发生错误。它只是没有出现。任何帮助将不胜感激。谢谢。渲染中继React中的现代碎片

的反应组件的样子：

 <div className="f6 lh-copy gray"> 
     {" "} 
     {this.props.link.votes.count} votes | by {" "} 
     {this.props.link.postedBy 
      ? this.props.link.postedBy.name 
      : "Unknown"}{" "} 
     {timeDifferenceForDate(this.props.link.createdAt)}{" "} 
     </div>{" "}

我已经得到了在graphiql拉正确的数据该工作graphql查询。

{ 
    links(first: 20) { 
    pageInfo { 
     hasPreviousPage 
     hasNextPage 
    } 
    edges { 
     node { 
     id 
     url 
     description 
     votes { 
      ...Link_votes 
     } 
     } 
    } 
    } 
} 

fragment Link_votes on VoteConnection { 
    edges { 
    cursor 
    node { 
     count 
    } 
    } 
}

这是输出

{ 
    "data": { 
    "links": { 
     "pageInfo": { 
     "hasPreviousPage": false, 
     "hasNextPage": false 
     }, 
     "edges": [ 
     { 
      "node": { 
      "id": "TGluazo1OWRiNDc4ODY5YmJkOTViOWY2YzVkMGY=", 
      "url": "afasfdasf", 
      "description": "adasdf", 
      "votes": { 
       "edges": [ 
       { 
        "cursor": "YXJyYXljb25uZWN0aW9uOjA=", 
        "node": { 
        "count": "3" 
        } 
       } 
       ] 
      } 
      } 
     } 
     ] 
    } 
    } 
}

在我Link.js组件我已经得到了这些片段重复上述graphql呼叫

createFragmentContainer(


Link, 
    graphql` 
    fragment Link_votes on VoteConnection { 
     edges { 
     cursor 
     node { 
      count 
     } 
     } 
    } 
    ` 
); 

export default createFragmentContainer(Link, { 
    link: graphql` 
    fragment Link_link on Link { 
     id 
     description 
     url 
     createdAt 
     postedBy { 
     id 
     name 
     } 
     votes { 
     ...Link_votes 
     } 
    } 
    ` 
});

完整Link.js文件在这gist。

这样的想法会是这样，考虑到“链接”节点的结构，这应该工作：

{this.props.link.votes.edges[0].node.count}

“链接”可以让你你是在graphql响应的链接。 'votes'可以让你得到拥有边数组的键，它总是只返回数组中包含投票计数结果的一个对象。所以，你要索引0数组中这将是

`{ "cursor": "YXJyYXljb25uZWN0aW9uOjA=", 
    "node": { 
     "count": "3" 
    } 
}`

如果我们想在索引为0的节点属性格式，我们用点符号，然后为对象的计数属性键相同。这不起作用。

答

这是什么工作。

solution was to remove the Link_votes fragment container 
``` 
createFragmentContainer(
    Link, 
    graphql` 
    fragment Link_votes on VoteConnection { 
     edges { 
     cursor 
     node { 
      count 
     } 
     } 
    } 
    ` 
); 
```

链路片段，用投票的方式直接，

``` 
votes { 
    edges { 
     node { 
     count 
     } 
    } 
} 
```

我想这只是在思考的情况下。我会在这里留下这个以防万一。

请将您的答案标记为解决方案:) – marktani

渲染中继React中的现代碎片

相关推荐