使用 ApolloClient 执行 GraphQL 查询时如何正确处理加载和部分状态？

Posted 2023-03-08

【中文标题】使用 ApolloClient 执行 GraphQL 查询时如何正确处理加载和部分状态？

【英文标题】：How to properly handle loading and partial states when executing a GraphQL query using ApolloClient?

【发布时间】：2022-01-03 12:52:51

【问题描述】：

我正在开发一个从 GraphQL 端点收集数据的后端应用程序，并且我正在使用 ApolloClient 这样做：

const client = new ApolloClient(
    uri: uri,
    link: new HttpLink( uri: uri, fetch ),
    cache: new InMemoryCache(
        addTypename: false,
    ),
);

当我使用query函数时：

client.query(
    query: query,
    variables: vars,
    fetchPolicy: "no-cache",
)

它返回一个ApolloQueryResult 对象：

ApolloQueryResult<T> = 
    data: T;
    errors?: ReadonlyArray<GraphQLError>;
    error?: ApolloError;
    loading: boolean;
    networkStatus: NetworkStatus;
    partial?: boolean;

我的问题是我检查了文档，但没有说明我应该如何处理 loading 和 partial 状态。我没有使用 React，我的印象是这些仅用于前端调用，但我想确定一下。

我对其进行了测试，无论我调用哪个端点，partial 和 loading 对我来说始终是 undefined。

从节点处理这些的正确方法是什么？会不会这些不是undefined？

【参考方案1】：

我自己也对这个很好奇，所以去看看源码。

loading: [可以忽略] 你在ApolloClient 上调用的query 方法永远不会将result.loading 设置为true。前端 React useQuery hook 确实如此，这是有道理的，因为它的工作是帮助 UI 渲染。

partial: [depends] ApolloQueryResult typedef source 包含以下注释：“如果从缺少字段的缓存中读取 result.data，result.partial 将为 true... em>”。您的客户端配置为使用缓存，但查询具有no-cache 策略。

【讨论】：

感谢鲍曼先生的回答。如果我使用缓存该怎么办？ partial 状态是什么意思？我必须重新申请吗？不过我有点失望。我在其他平台上使用了具有缓存功能的库，作为用户，我不应该知道缓存未命中/驱逐等根本。它应该在幕后无缝处理。

很高兴为您提供帮助。 partial 告诉调用者，在网络错误的情况下，一些但不是所有请求的数据可以从缓存中传递。这是一个非常方便的前端功能，其中不可靠的网络一直是一个令人头疼的问题。应用程序可以选择立即在 UI 中呈现部分数据，同时将其标记给用户不完整并重试。不过，与您这样的后端服务不太相关，您是对的。