获取relay/graphql中特定列表项的附加信息

Question

使用Relay和GraphQL,假设我有一个返回查看器的模式,以及一个嵌入的相关文档列表.根查询(由片段组成)看起来像这样:

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

这将允许我显示用户以及所有关联组的列表.

现在让我们说我希望用户能够点击该列表项,并让它展开以显示与该特定列表项关联的注释.我应该如何重新构建我的中继路由查询,以便我可以收到这些评论？如果我向组边缘添加注释边缘,那么它不会获取所有组的注释吗？

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.即,我如何有效地构建路径查询,该查询仅获取扩展列表项(或多个项)的注释,同时仍然利用已存在的缓存数据,并在进行突变时更新？上面的示例可能适用于特定的扩展组,但我不确定如何在不为所有组项提取这些字段的情况下同时扩展多个组.

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,
      }
    `,
  },
});

在render方法中,仅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>
    );  
  }
}