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

【问题标题】：More info on an element of a relay connection有关中继连接元素的更多信息
【发布时间】：2017-04-28 08:21:06
【问题描述】：

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

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

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

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

以下是我的想法：

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

现在 1. 似乎违背了整个“图”模型的思维，通过添加“函数”来获取一个元素到图中。

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

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

更新

我们最终为每个连接创建了一个字段，该字段将 id 作为输入并从列表中返回一个元素。这是受到 Graphcool、GitHub 和其他人在其端点中的做法的启发。感谢您为我指明正确的方向。

【问题讨论】：

标签： graphql relayjs relay

【解决方案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
  }
}

【讨论】：

链接好像失效了，相关信息已经移到relay-api/one-node

【解决方案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 });

【讨论】：