렌더링 중계 (Relaying Relay) 현재의 현대 조각들

Question

"카운트"데이터가 UI에 나타나지 않는 것 같습니다. 같은 컨테이너에서 두 조각을 사용하거나 가장자리 배열이나 비동기를 렌더링하는 것에 대해 뭔가 빠뜨린 것 같습니다. 다른 모든 데이터는 {this.props.link.votes.count}을 제외하고는 UI에서 비어있는 반면 dev 도구에서는 서버 또는 클라이언트에 오류가 발생하지 않습니다. 그냥 나타나지 않습니다. 도움을 주시면 대단히 감사하겠습니다. 고맙습니다. 내가 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 호출을 중복이 조각을 가지고 내 Link.js 구성 요소에서 출력

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

입니다

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'는 투표 결과를 포함하는 배열에 항상 하나의 객체를 반환하는 가장자리 배열을 가진 vote 키를 가져옵니다. 그래서 당신은 우리가 인덱스 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 
     } 
    } 
} 
``` 

나는이 단지를 통해 생각의 사건이었다 생각하고 있어요. 누군가를 도울 수 있기를 바랍니다.