Graphql 在React中渲染中继现代片段

我似乎无法在UI中显示“计数”数据。我肯定我遗漏了一些关于在同一容器中使用两个片段或者渲染边缘数组或者异步的东西。 除了

{this.props.link.voates.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>{" "}

这是输出

{
  "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文件就在这里

因此，考虑到“链接”节点的结构，这应该是可行的：

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

“link”获取graphql响应中的链接“投票”获取投票键，该键具有一个边数组，该数组始终只返回包含投票计数结果的数组中的一个对象。因此，您希望该数组中的索引0

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

如果我们想要索引0上的节点属性，我们使用点表示法，然后对对象上的count属性键使用相同的点表示法。这是行不通的

这就是成功的原因

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
      }
   }
}
```

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

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