代码之家 › 专栏 › 技术社区 › Beau

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

react-apollo apollo

Beau · 技术社区 · 6 年前

在我的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合并的好例子。

1 回复 | 直到 6 年前

Daniel Rearden 6 年前

这是一个很好的例子, @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 .