graphql - 在 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

Relay 0.3.2 将支持@skipand@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在您的渲染方法中，仅在定义时才渲染注释。在 Group 组件中调用this.props.relay.setVariables({showComments: true})以包含 comments 字段（并在必要时获取）。

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