在 React 中渲染 Relay 现代片段

Posted 2023-03-08

【中文标题】在 React 中渲染 Relay 现代片段

【英文标题】：Rendering Relay Modern Fragments in React

【发布时间】：2018-03-20 13:02:15

【问题描述】：

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

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>" "

我有这个工作的 graphql 查询，它可以在 graphiql 中提取正确的数据。

  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

'link' 在 graphql 响应中为您提供您所在的链接。 'votes' 为您提供 votes 键，该键具有一组边，该数组始终只返回数组中包含投票计数结果的一个对象。因此，您希望该数组中的索引 0 为

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

如果我们想要索引 0 上的节点属性，我们使用点表示法，那么对象上的 count 属性键也是如此。这是行不通的。

【参考方案1】：

这是有效的。

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
      
   

```

我认为这是一个过度思考的案例。我会把它留在这里，以防它对任何人有帮助。