レンダリングリレー現代の現実の断片

Question

"カウント"データがUIに表示されないようです。私は、同じコンテナで2つのフラグメントを使用したり、エッジ配列または非同期をレンダリングすることについて何か不足していると確信しています。 他のすべてのデータは、{this.props.link.votes.count}以外は表示されていますが、UIでは空になり、開発ツールではサーバやクライアントにエラーが発生しません。それはちょうど表示されません。 ご協力いただければ幸いです。ありがとうございました。

ザ・コンポーネントがどのように見えるの反応：私はgraphiqlで正しいデータをプルアップし、この作業graphqlクエリを持って

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

。

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

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

これは私が上記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ファイルを複製し、これらのフラグメントを持っている私のLink.jsコンポーネントで出力

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

されていますこのgistの

だから、アイデアは、これは動作するはずです、「リンク」ノードの構造を考えると、次のようになります。

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

「リンクは、」あなたがgraphql応答しているリンクを取得します。 'votes'は票のカウント結果を含む配列内のオブジェクトを常に1つ返す辺の配列を持つ票キーを取得します。だから、私たちは、インデックス0のノードproperyをしたい場合は

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

私は、これは単なる思考以上のケースだったと思っています。それが誰にも役立つ場合に備えて、私はここに残しておきます。