Q:

How To Implement apollo-link-error In Angular Module And In GraphQL Queries And Mutations?

I like this suggested global setup from the apollo-angular docs.  I'm not sure about putting errorLink in options or if it should be grouped with httpLink.
The big question is:  How do I use this in my code?  I can't find examples anywhere and I don't know how to start.  I don't have the concept of apollo-link-error in my head yet.
app.module.ts
...
import { ApolloModule, APOLLO_OPTIONS } from 'apollo-angular';
import { HttpLinkModule, HttpLink } from 'apollo-angular-link-http';
import { onError } from 'apollo-link-error';

// This is just a copy and past from the docs at this time.

const errorLink = onError(({ graphQLErrors, networkError }) => {
  if (graphQLErrors)
    graphQLErrors.map(({ message, locations, path }) =>
        console.log(
            `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`,
        ),
    );
  if (networkError) console.log(`[Network error]: ${networkError}`);
});

@NgModule({
  imports: [
    ...
  ],
  declarations: [
    ...
  ],
  providers: [
    ...
    { provide: APOLLO_OPTIONS,
      useFactory: (httpLink: HttpLink) => {
        return {
          cache: new InMemoryCache(),
          link: httpLink.create({
            uri: 'http://localhost:3000/graphql',
          }),
          options: {
            errorLink
          },
          defaultOptions: {
          }
        };
      },
      deps: [HttpLink]
    },
  ],

})
export class AppModule { }

A component with a query:
this.apollo
        .watchQuery({
            query: getAllMembers,
        })
        .valueChanges
        .subscribe(result => {
            if (result !== null) {
                this.dataSource.data = result.data['getMembers'];
            } else {
// What should be here???  This doesn't seem to work.
                console.log('errors ', result.errors);
            }
        });

A:

I had the same problem.
Apollo-link-error is like a middleware that you can use to intercept errors at a single location in your code, and do some generic error handling with it.
If you want to propagate that error to a service or a component, there's an extra step:
I noticed that the error details are removed from the response unless you use:
apollo.watchQuery({
   ..., // options
   errorPolicy: 'all'
 });

That way you can check for the response on the service, and look for "data" and "errors".
If its a validation error it's an http 200 with the errors object.
You can then propagate that error to components, and use it for displaying error messages on forms, for instance.
For more info:
https://www.apollographql.com/docs/react/data/error-handling/
https://www.apollographql.com/docs/angular/features/error-handling/#error-policies
Hope it helps!

