如何使用Apollo / GraphQL递增/递进查询数据源？

Question

我的React / Apollo应用程序中有一个这样的查询：

const APPLICATIONS_QUERY = gql`
  {
    applications {
      id
      applicationType {
        name
      }
      customer {
        id
        isActive
        name
        shortName
        displayTimezone
      }
      deployments {
        id
        created
        user {
          id
          username
        }
      }
      baseUrl
      customerIdentifier
      hostInformation
      kibanaUrl
      sentryIssues
      sentryShortName
      serviceClass
      updown
      updownToken
    }
  }
`;

查询中的大多数项目都在数据库中，因此查询是快速的。 但是其中一些项目（例如sentryIssues和updown依赖于外部API调用，因此它们使查询的持续时间非常长。

我想将查询分为数据库部分和外部API部分，以便我可以立即显示applications表，并为命中外部API的两列添加加载微调器。但是我找不到一个很好的示例增量/渐进式查询或将两个查询的结果与Apollo合并。

Answer 1

这是一个@defer指令会有所帮助的好例子。 您可以像这样指示要针对给定查询推迟哪些字段：

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

在这种情况下，客户将发出一个请求，但收到2个响应-带有所有请求字段的初始响应不包含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预览版才能使用它。

有关详细信息，请参阅文档 。