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

Question

使用 Relay 和 GraphQL，假设我有一个返回查看器的模式和一个嵌入的关联文档列表。根查询（由片段组成）看起来像这样：

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

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

现在假设我希望用户能够单击该列表项，并使其展开以显示与该特定列表项关联的 cmets。我应该如何重组我对中继路由的查询，以便我可以接收这些 cmets？如果我将 cmets 边缘添加到我的组边缘，那么它不会获取所有组的 cmets 吗？

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 的上下文中使用它。即，我怎样才能有效地构建一个路由查询，它只会获取扩展列表项（或多个项目）的 cmets，同时仍然利用已经存在的缓存数据，并且在执行突变时会更新？上面的示例可能适用于特定的扩展组，但我不确定如何在不为 所有 组项目获取这些字段的情况下同时扩展多个组。

Answer 1

Relay 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 时才渲染 cmets。在 Group 组件中调用 this.props.relay.setVariables({showComments: true}) 以包含 cmets 字段（并在必要时获取）。

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