如何使用 Apollo/GraphQL 来 incrementally/progressively 查询数据源？

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 table 并为两列添加加载微调器命中外部 API...但我找不到 incremental/progressive 使用 Apollo 查询或合并两个查询结果的好例子。

Answer 1

这是一个很好的例子，说明了 @defer 指令的作用。您可以指出要为给定查询延迟哪些字段，如下所示：

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

在这种情况下，客户端将发出一个请求但会收到 2 个响应——包含所有请求字段的初始响应 customer 和第二个 "patch" 响应仅包含客户字段一旦解析器完成就被触发。客户端为您完成繁重的工作并将这两个响应拼凑在一起——不需要额外的代码。

请注意，只能延迟可为空的字段，因为随第一个响应发送的初始值始终为空。作为奖励，react-apollo 公开了一个 loadingState 属性，您可以使用它来检查延迟字段的加载状态：

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

唯一的缺点是这是一个实验性功能，所以目前您必须安装 apollo-server 和客户端库的 alpha 预览版才能使用它。

See the docs for full details.

如何使用 Apollo/GraphQL 来 incrementally/progressively 查询数据源？

How can I use Apollo/GraphQL to incrementally/progressively query a datasource?

apollo

react-apollo