渲染中繼React中的現代碎片

我似乎無法獲得在用戶界面中顯示的「計數」數據。我確定我錯過了在同一個容器中使用兩個片段或渲染邊緣數組或異步的東西，也許。顯示除{this.props.link.votes.count}之外的所有其他數據，它在用戶界面中顯示爲空，同時在開發工具中的服務器或客戶端上沒有發生錯誤。它只是沒有出現。任何幫助將不勝感激。謝謝。渲染中繼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>{" "}

我已經得到了在graphiql拉正確的數據該工作graphql查詢。

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

「鏈接」可以讓你你是在graphql響應的鏈接。 'votes'可以讓你得到擁有邊數組的鍵，它總是隻返回數組中包含投票計數結果的一個對象。所以，你要索引0數組中這將是

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

如果我們想在索引爲0的節點屬性格式，我們用點符號，然後爲對象的計數屬性鍵相同。這不起作用。

來源

2017-10-09 idkjs

這是什麼工作。

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

我想這只是在思考的情況下。我會在這裏留下這個以防萬一。

來源

2017-10-10 11:27:48 idkjs

請將您的答案標記爲解決方案:) – marktani

渲染中繼React中的現代碎片

回答

相關問題