在 React 中渲染 Relay Modern Fragments

Question

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

反应组件看起来像：

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

所以想法是，给定 'link' 节点的结构，这应该可行：

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

'link' 让你得到你在 graphql 响应中的 link。 'votes' 为您提供 votes 键，该键具有一组边缘，该边缘始终 returns 只是数组中包含投票计数结果的一个对象。因此，您希望该数组中的索引 0 为

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

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

Answer 1

这是有效的方法。

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

在link片段中，直接使用投票，

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

我认为这是一个多虑的案例。我会把它留在这里以防它对任何人有帮助。

在 React 中渲染 Relay Modern Fragments

Rendering Relay Modern Fragments in React

graphql

relayjs

react-relay

graphiql