如何使用 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-server和客户端库的alpha预览版本才能使用它。

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