query-component.tsx

export const REVIEW_HIGHLIGHT_QUERY = gql`
  ${BookHighlighReview.fragments.review}
  query($bookId: MongoID!) {
    reviews: bookReviewConnection(
      filter: { bookId: $bookId }
      first: 3
      sort: CREATED_AT_DESC
    ) {
      count
      edges {
        node {
          ...BookHighlighReview__BookReview
        }
      }
    }
  }
`
type ReviewEdges = Array<{ node: BookReviewItemData }>
type ReviewHighlightDataPropTypes = {
  children: (reviews: ReviewEdges, loading: boolean) => JSX.Element
  bookId: string
}
export const ReviewHighlightData: React.SFC<ReviewHighlightDataPropTypes> = ({
  children,
  bookId
}) => (
  bookId ? <Query query={REVIEW_HIGHLIGHT_QUERY} variables={{bookId}}>
    {({ loading, data }) => {
      if (data && data.reviews) {
        return children(data.reviews.edges, loading)
      } else {
        return children([], loading)
      }
    }}
  </Query> : <div data-message="no-book-id" />
)

// usage
<ReviewHighlightData bookId={book._id}>
  {(reviews) => (
    <BookHighlighReview onWriteReviewClick={this.onWriteReviewClick}  bookId={book._id} review={reviews} />
  )}
</ReviewHighlightData>