Selecting additional information for a specific list item in relay / graphql

Question

Using Relay and GraphQL, let's say that I have a schema that returns a viewer, and a built-in list of related documents. The root query (consisting of fragments) will look something like this:

query Root {
  viewer {
    id,
    name,
    groups {
      edges {
        node {
          id,
          name,
        }
      }
    }
  }
}

This will allow me to display the user and a list of all groups associated with him.

Now let me say that I want the user to be able to click on this list item and expand it to show comments related to this particular list item. How should I restructure my request for a relay route to receive these comments? If I add the comment edge to the edge of my groups, will it not receive comments for all groups?

query Root {
  viewer {
    id,
    name,
    groups {
      edges {
        node {
          id,
          name,
          comments {
            edges {
              node {
                id,
                content
              }
            }
          }
        }
      }
    }
  }
}

, ?

query Root {
  group(id: "someid"){
    id,
    name,
    comments {
      edges {
        node {
          id,
          content
        }
      }
    }
  },
  viewer {
    id,
    name,
    groups {
      edges {
        node {
          id,
          name,
        }
      }
    }
  }
}

, , relay. I.e., , ( ), , , ? , , , .

Answer 1

0.3.2 @skip @include.

Group = Relay.createContainer(Group, {
  initialVariables: {
    numCommentsToShow: 10,
    showComments: false,
  },
  fragments: {
    group: () => Relay.QL`
      fragment on Group {
        comments(first: $numCommentsToShow) @include(if: $showComments) {
          edges {
            node {
              content,
              id,
            },
          },
        },
        id,
        name,
      }
    `,
  },
});

, this.props.group.comments. this.props.relay.setVariables({showComments: true}) Group, ( , ).

class Group extends React.Component {
  _handleShowCommentsClick() {
    this.props.relay.setVariables({showComments: true});
  }
  renderComments() {
    return this.props.group.comments
      ? <Comments comments={this.props.group.comments} />
      : <button onClick={this._handleShowCommentsClick}>Show comments</button>;
  }
  render() {
    return (
      <div>
        ...
        {this.renderComments()}
      </div>
    );  
  }
}