HttpErrorResponse error in ErrorLink

[JesseZomer]

Describe the bug

I'm using v12.1.0 with Apollo Server v5.2.0 and encountering an issue where GraphQL validation errors don't match the expected error types described in the documentation. It looks like https://the-guild.dev/graphql/apollo-angular/docs/data/error-handling is still using an old errorLink in the way that isn't possible anymore in the newest versions, however it also doesn't align with the latest apollo-client documentation.

Current Behavior
When a GraphQL validation error occurs (e.g., querying a non-existent field), Apollo Server v5 returns an HTTP 400 status code.

Looking at the apollo client docs this part says validation errors are CombinedGraphQLErrors. However it has this note under it:

If a GraphQL error prevents your server from executing your operation at all, your server may respond with a non-2xx status code. Apollo Client handles this according to the [GraphQL Over HTTP specification](https://graphql.github.io/graphql-over-http/draft/).

which is what I'm seeing. I'm getting a 400 Bad Request in the network tab with the following response:

{
  "errors": [{
    "message": "Cannot query field \"vakdocentenDashboardResultatenabc\"...",
    "extensions": { "code": "GRAPHQL_VALIDATION_FAILED" }
  }]
}

This makes it an Network Error . because that says: These are errors encountered while attempting to communicate with your GraphQL server. The error may be a result of a 4xx or 5xx response status code ...
and then specifically an

[ServerError](https://www.apollographql.com/docs/react/api/errors/ServerError) - Occurs when the server responds with a non-200 HTTP status code

However console.logging the error in the errorLink returns this:

CombinedGraphQLErrors.is(error) // false
ServerError.is(error)           // false
ServerParseError.is(error)      // false

because this is the object:

{
  "name": "HttpErrorResponse",
  "status": 400,
  "statusText": "Bad Request",
  "url": "http://localhost:3000/graphql",
  "ok": false,
  "message": "Http failure response for http://localhost:3000/graphql: 400 Bad Request",
  "error": {
    "errors": [{
      "message": "Cannot query field \"vakdocentenDashboardResultatenabc\"...",
      "extensions": { "code": "GRAPHQL_VALIDATION_FAILED" }
    }]
  }
}

This seems like a bug, or is this expected behaviour? The documentation should be updated atleast

To Reproduce

Use a query with a unknown field

Expected behavior

I expect ServerError.is(error) in the errorLink to be true when receiving a 400 status.

Environment:

@angular/cli@20.3.13
@angular/core@20.3.3 
@apollo/client@4.0.11
apollo-angular@12.1.0 
graphql@16.12.0 
typescript@5.9.2

[PowerKiKi]

From reading your description, I'm inclined to agree with you, and ServerError.is(error) in the errorLink should be true. If you are able to come up with a PR, I'll review it.

[JesseZomer]

I have to admit that's a bit out of my depth. I did however try to to implement with AI which could be used as a starting point. This can be found here: #2395

Again I don't really know if this is the right solution you would want to go in and the tests might be a bit verbose, but I figured it's at least something I could do 🤷‍♂️