Rendering Relay Modern Fragments in React

Question

I cant seem to get the "count" data to show up in the UI. I'm sure I'm missing something about using two fragments in the same container or rendering the edges array or async, maybe. All other data is showing except {this.props.link.votes.count} which comes up empty in the UI while throwing no errors on the server or client in dev tools. Its just not showing up. Any help would be greatly appreciated. Thank you.

The react component looks like:

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

I've got this working graphql query that pulls up the correct data in graphiql.

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

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

This is the output

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

In my Link.js component i've got these fragments that duplicate the above graphql call

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

The full Link.js file is in this gist.

So the idea would be, given the structure of the 'link' node, this should work:

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

'link' gets you the link you are on in the graphql response. 'votes' gets you the votes key which has an array of edges which always returns just one object in the array containing the count result for votes. So you want index 0 in that array which would be

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

If we want the node propery on index 0, we use dot notation, then same for the count property key on the object. This is not working.

Answer 1

This is what worked.

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

in link fragment, use votes directly,

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

I'm thinking this was a case of just over thinking. I will leave this here in case it helps anyone.