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预览版才能使用它。

See the docs for full details。

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

1 个答案: