GraphQLErrors from mutation not available in ApolloError

[atstoyanov]

Intended outcome:

Network and graphql errors in the ApolloError object should be available in the onError handler.

Actual outcome:

If a mutation results in Validation error a NetworkError is raised. The onError link show correctly both errors. Like shown below. The ApolloError object that is passed to the onError handler contains only the NetworkError.

In the onError link
graphQLErrors:

[
    {
        "message": "Variable \"$input\" got invalid value \"as\" at \"input.nameID\"; Expected type \"NameID\". NameID value not valid: as",
        "locations": [
            {
                "line": 1,
                "column": 24
            }
        ],
        "extensions": {
            "code": "BAD_USER_INPUT",
            "exception": {
                "stacktrace": [
                    "UserInputError: NameID value not valid: as",
                   ...
                ]
            }
        }
    }
]

networkError:

{
    "name": "ServerError",
    "response": {},
    "statusCode": 400,
    "result": {
        "errors": [
            {
                "message": "Variable \"$input\" got invalid value \"as\" at \"input.nameID\"; Expected type \"NameID\". NameID value not valid: as",
                "locations": [
                    {
                        "line": 1,
                        "column": 24
                    }
                ],
                "extensions": {
                    "code": "BAD_USER_INPUT",
                    "exception": {
                        "stacktrace": [
                            "UserInputError: NameID value not valid: as",
                             ...
                        ]
                    }
                }
            }
        ]
    }
}

Error in the handler:

{
    "graphQLErrors": [],
    "networkError": {
        "name": "ServerError",
        "response": {},
        "statusCode": 400,
        "result": {
            "errors": [
                {
                    "message": "Variable \"$input\" got invalid value \"as\" at \"input.nameID\"; Expected type \"NameID\". NameID value not valid: as",
                    "locations": [
                        {
                            "line": 1,
                            "column": 24
                        }
                    ],
                    "extensions": {
                        "code": "BAD_USER_INPUT",
                        "exception": {
                            "stacktrace": [
                                "UserInputError: NameID value not valid: as",
                               ...
                            ]
                        }
                    }
                }
            ]
        }
    },
    "message": "Response not successful: Received status code 400"
}

How to reproduce the issue:

Here is code example with the problem:
https://github.com/atstojanov/apolloerror-reproduce

Versions

System:
OS: Linux 5.4 Ubuntu 20.04.2 LTS (Focal Fossa)
Binaries:
Node: 12.18.1 - ~/.nvm/versions/node/v12.18.1/bin/node
Yarn: 1.22.10 - ~/.nvm/versions/node/v12.18.1/bin/yarn
npm: 6.14.8 - ~/.nvm/versions/node/v12.18.1/bin/npm
npmPackages:
@apollo/client: ^3.3.21 => 3.3.21
apollo-upload-client: ^14.1.3 => 14.1.3

[benjamn]

Thanks for the reproduction @atstojanov!

Possibly related: #6222

[Karibash]

I have defined and used the following helper function to get the validation errors generated by mutation.

export const formatApolloError = (error?: ApolloError): ApolloError | undefined => {
  if (!error) return undefined;

  if (
    error.networkError &&
    'result' in error.networkError &&
    'errors' in error.networkError.result &&
    error.networkError.result.errors.length
  ) {
    const networkError = error.networkError.result.errors[0];
    if (networkError.extensions.code === 'BAD_USER_INPUT') {
      error.message = networkError.message.split(';').slice(-1)[0].trim();
    } else {
      error.message = networkError.message;
    }
  }

  if (error.graphQLErrors && error.graphQLErrors.length) {
    error.message = error.graphQLErrors[0].message;
  }

  return error;
};

[MrDoomBringer]

I believe this issue is directly related to #9870, so I plan to close this as a duplicate to try and keep discussion in a single place. If you think this issue is unrelated, please let me know and we can keep this open. Thanks a ton :)