Question

我正在使用Relay和Graphql，我很难弄清楚如何在连接中的一个对象上获取更多字段。

假设我们有以下查询来填充查看者的任务列表：

viewer {
  id
  tasks(first:10) {
    edges {
      node {
        id
        name
      }
    }
  }
}

当用户然后在列表中选择一个时，我想获取所选字段上的更多字段。

以下是我的想法：

我在查看器对象上实现了一个新的字段/方法，称为＆＃34; task＆＃34;并将id作为输入并返回一个任务。喜欢这个答案：https://stackoverflow.com/a/40712653/5820184
使用节点根查询来获取丢失的数据。（我不知道如何在中继中执行此操作。我是否根据两个查询使根容器依赖？）
使连接获取id的输入，然后仅返回该任务。

现在1.似乎违背了整个＆＃34;图表＆＃34;通过添加＆＃34;函数＆＃34;进行模型思考将一个元素提取到图表中。

对于2号，我不太确定使用节点根查询是一个好习惯，因为它似乎是一个内部中继的东西？

我不知道3号是否是一个可行的解决方案，因为它过滤了可能对列表视图产生影响的列表？

更新

我们最终为每个连接创建了一个字段，该字段将id作为输入，从列表中返回一个元素。这得益于Graphcool，GitHub和其他人在终端中的做法。谢谢你指点我正确的方向。

Answer 1

official Relay docs实际上提到了第二种方法。

在您的情况下，您可以对特定任务进行额外查询，如下所示：

query SpecificNode {
  node(id: "task-id") {
    id
    ... on Task {
      name
      # more fields
    }
  }
}

Graphcool的Relay API包含对fetch one node of a specific model的其他顶级查询。对您的案例的查询如下所示：

query SpecificTask {
  Task(id: "task-id") {
    id
    name
    # more fields
  }
}

Answer 2

您可以在@include指令的帮助下完成此操作。接力将照顾一切！

假设您已将task设计为单独的React组件，导出的Relay容器将如下所示：

export default Relay.createContainer(Task, {
  initialVariables: {
    taskSelected: false,
  },
  fragments: {
    viewer: () => Relay.QL`
      fragment on Viewer {
        id
        tasks(first:10) {
          edges {
            node {
              id
              name
              additionalInfo @include(if: $taskSelected) {
                where,
                when,
                who,
                priority
              }
            }
          }
        }
      }
    `,
  },
});

使用additionalInfo提取@include(if: $taskSelected)是有条件的，其中taskSelected是一个Relay变量，并在initialVariables属性下初始化。当观众选择任务以获取更多信息时，请将taskSelected设置为true，并使用：

this.props.relay.setVariables({ taskSelected: true });

有关中继连接元素的更多信息

2 个答案: