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

Question

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

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

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，则只渲染评论。在组组件中调用 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 中特定列表项的附加信息

fetching additional information for a particular list item in relay/graphql

graphql

graphql-js

relayjs