如何解析 GraphQL 返回的错误信息

如何解析 GraphQL 返回的错误信息

在开发前端应用时，与后端的数据交互通常都采用 REST API 接口，而最近几年出现的 GraphQL 也逐渐流行起来，成为了前端应用和后端数据交互的新选择。然而，由于 GraphQL 查询和变更语句都是字符串形式的，当发生错误时，系统并不会像 REST API 一样返回简单的 HTTP 错误码和错误信息，而是需要针对每个 GraphQL 请求单独解析返回的错误信息。因此，本文将介绍如何解析 GraphQL 返回的错误信息，帮助前端开发者更好地利用 GraphQL。

1. GraphQL 错误信息格式

当进行 GraphQL 远程操作时（查询或变更等），GraphQL 服务端将返回一个 JSON 对象，其中包含查询结果、错误信息等等。但是，如果请求出现错误，服务端返回的结果中将有一个 errors 字段，它将包含一个错误信息数组。每个错误信息对象都会包含至少一个 message 字段，用于描述错误信息。下面是一个含有错误信息的 GraphQL 返回结果示例：

// javascriptcn.com 代码示例
{
    "data": { ...正常的数据对象... },
    "errors": [
        {
            "message": "Cannot query field \"thumbnailUrl\" on type \"Product\".",
            "locations": [
                {
                    "line": 3,
                    "column": 5
                }
            ],
            "path": [
                "product",
                "thumbnailUrl"
            ]
        }
    ]
}

其中：

• data 表示成功返回的数据；
• errors 表示全部的错误信息数组，如果没有错误，该字段将不存在；
• message 表示具体的错误信息，该字段是必需的；
• locations 表示错误发生的位置，包含行、列信息；
• path 表示查询中报错的对象路径。

在实际解析错误信息时，错误信息数组 errors 可能含有多个对象，每个对象的 message 字段描述了不同的错误。

1. 解析 GraphQL 错误信息

对于前端开发者而言，最需要的是将 GraphQL 返回的错误信息解析为一个相对友好且可处理的格式，以便在用户面前显示或进一步处理。下面使用示例代码演示如何解析 GraphQL 返回的错误信息。

// javascriptcn.com 代码示例
function handleGraphQLError(error) {
    if (!error || !error.graphQLErrors) {
        return;
    }

    error.graphQLErrors.forEach((error) => {
        console.log(`GraphQL error: ${error.message}`);

        if (error.extensions) {
            console.log("Extensions: ", error.extensions);
        }

        if (error.path) {
            console.log("Path: ", error.path);
        }

        if (error.locations) {
            console.log("Locations: ", error.locations);
        }
    });
}

上述代码中，我们通过解构错误参数对象中的 graphQLErrors 字段获取错误信息数组，并使用 forEach() 方法遍历所有错误。对于每个错误，我们使用 console.log() 打印出其 message、extensions、path、locations 等相关信息，以便开发者了解错误的具体情况并进一步调试。

使用示例：

import { graphql } from "@apollo/client";
import { GET_USER } from "./queries";

graphql(GET_USER, { variables: { id: "123" } })
    .then((result) => {
        console.log(result.data);
    })
    .catch(handleGraphQLError);

在上述示例中，我们使用了 Apollo 客户端库的 graphql() 函数查询用户信息，这个函数返回一个 promise，then() 方法中获取成功返回的 data，catch() 方法中捕捉可能出现的错误，进而调用 handleGraphQLError() 函数解析 GraphQL 错误信息。

1. 深入学习 GraphQL 错误处理

了解了如何解析 GraphQL 返回的错误信息，我们可以进一步深入学习 GraphQL 错误处理的相关知识，优化我们的代码。

• GraphQL 错误分类

GraphQL 可能会抛出两种类型的错误：

- 程序性错误（Programmatic Errors）：这类错误是由于服务端程序逻辑不正确导致的，例如，服务端程序在查询时使用了一个无效的参数名。此类错误通常使用 HTTP 状态码 500 表示，并不会返回任何数据。
- 非程序性错误（Non-programmatic Errors）：这类错误由于客户端逻辑错误或用户的输入错误导致，例如，客户端尝试查询不存在的数据。此类错误通常返回 HTTP 400 状态码，以及其他错误信息。

开发者可以根据这两类错误处理机制进行具体的代码编写。

• 端到端错误链路跟踪

GraphQL 在服务端到客户端之间建立了一个完整的数据路径，而这个路径上的每个环节都可能发生错误。因此，在解析 GraphQL 错误信息时，我们还需要跟踪整个错误链路（Error Link）并划分错误级别，以便在系统中进行更好的错误处理和研发优化。

• 添加更多错误信息

除了 message、extensions、path、locations 等固定的错误信息，GraphQL 还支持开发者自定义错误信息，并在错误信息中返回相关数据。这样可以比较方便地在客户端进行错误处理、状态更新等操作。

1. 总结

本文介绍了如何解析 GraphQL 返回的错误信息。在前端应用中应用 GraphQL 时，掌握如何解析 GraphQL 返回的错误信息是非常重要的，并且需要将其作为代码的一部分进行规范化处理。本文提供了示例代码和相关实践经验，帮助开发者更好地掌握 GraphQL，并进一步优化应用程序。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6534f6787d4982a6ebaad03c