如何使用Apollo/graphql增量/渐进地查询数据源?

这是一个很好的例子, @defer 指示会有帮助。对于给定的查询,可以指示要推迟的字段,如下所示:

const APPLICATIONS_QUERY = gql`
  {
    applications {
      id
      applicationType {
        name
      }
      customer @defer {
        id
        isActive
        name
        shortName
        displayTimezone
      }
    }
  }
`

在这种情况下,客户机将发出一个请求,但会收到2个响应——带有所有请求字段sans的初始响应。 customer 以及第二个“补丁”响应,其中只有在解析器完成后触发的客户字段。客户机完成了繁重的工作,并为您将这两个响应拼凑在一起——不需要额外的代码。

请注意,只能延迟可为空的字段,因为与第一个响应一起发送的初始值始终为空。作为奖励, react-apollo 暴露一个 loadingState 可用于检查延迟字段的加载状态的属性:

<Query query={APPLICATIONS_QUERY}>
  {({ loading, error, data, loadingState }) => {
    const customerComponent = loadingState.applications.customer
      ? <CustomerInfo customer={data.applications.customer} />
      : <LoadingIndicator />
    // ...
  }}
</Query>

唯一的缺点是这是一个实验性的特性,所以现在您必须安装Apollo服务器和客户机库的alpha预览版本才能使用它。

See the docs for full details .