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

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

在relay / graphql

1 个答案: