Question

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

反应组件如下：

       <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'为你获得了投票键，它有一个边数组，它总是只返回数组中包含投票计数结果的一个对象。所以你希望那个数组中的索引0是

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

如果我们希望节点在索引0上运行，我们使用点表示法，然后对象上的count属性键使用相同的表示法。这不起作用。

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

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

在React

1 个答案: