如何在Apollo GraphQL中获取网络面板内的后端验证错误信息？

问题原因 #

默认情况下，当后端返回GraphQL错误（比如表单验证失败）时，Apollo Client会直接抛出ApolloError实例，不会将错误数据注入到data对象中。这就是你在try块里拿不到data.errors、catch块里data未定义的核心原因——错误发生时try块内的const { data } = await addUser(...)根本没执行完，直接跳转到了catch分支。

简便解决方案 #

方案1：在catch块中直接处理ApolloError #

ApolloError实例自带graphQLErrors数组，里面就是后端返回的所有验证错误信息，直接提取即可：

try {
    const { data } = await addUser({
        variables: { username, email, password }, 
    })
    alert('Account creation successful!')
    Auth.login(data.addUser.token);
    navigate('/login')
} catch (err) {
    // 优先处理GraphQL层面的验证错误
    if (err.graphQLErrors?.length) {
        const firstError = err.graphQLErrors[0];
        setAlerts(firstError.message, "inline text-groove-red");
        // 如果后端在extensions里返回了字段级验证详情，还可以这样取：
        // const fieldErrors = firstError.extensions?.validationErrors;
    } else {
        // 处理网络错误、客户端配置错误等其他类型
        console.error('非验证类错误:', err);
    }
}

方案2：设置errorPolicy为'all' #

如果你希望错误数据被包含在data对象中（不触发catch），可以在调用mutation时添加errorPolicy: 'all'配置：

try {
    const { data } = await addUser({
        variables: { username, email, password },
        errorPolicy: 'all' // 关键配置：保留错误到data中
    })
    if (data.addUser === null) {
        // 此时后端返回的错误会在data.errors数组里
        if (data.errors?.length) {
            setAlerts(data.errors[0].message, "inline text-groove-red");
        }
    } else {
        alert('Account creation successful!')
        Auth.login(data.addUser.token);
        navigate('/login')
    }
} catch (err) {
    // 这里仅捕获网络错误等非GraphQL业务错误
    console.error('客户端/网络错误:', err);
}

补充说明 #

• graphQLErrors中的每个错误对象，除了message，后端通常会在extensions字段里附带更详细的信息（比如具体哪个字段验证失败），可以根据后端返回结构提取使用。
• 两种方案选其一即可，方案1更符合Apollo默认的错误处理逻辑，方案2适合需要同时拿到部分数据和错误的场景。

内容的提问来源于stack exchange，提问作者Cadhig