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

Question

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);
            }
        });

I can't really speak to how this would work in an Angular context, but the whole idea behind error link is to do generic error handling -- i.e. it's logic that runs for every request. So if you use an error link and handle the error there (log it, show a dialog, whatever), you hopefully don't have to do any additional error handling inside individual components. — Daniel Rearden, Aug 14 '19 at 20:33
For fine-tuning error handling *inside* components, see [errorPolicy](https://www.apollographql.com/docs/angular/features/error-handling/#error-policies). — Daniel Rearden, Aug 14 '19 at 20:34
As always, thank you for your deep insight! I have errorPolicy but this line from the Apollo Angular docs below errorPolicy intrigues me: "When using Apollo Link, the ability to handle network errors is way more powerful." Any thoughts about where errorLink should go in my module? Apollo Angular is just Apollo Client. — Preston, Aug 14 '19 at 21:36

Mat Ron · Answer 1 · 2020-01-17T15:40:00.280

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!

Thanks Mat Ron, I figured that out eventually but forgot to get back to this post to update it. Me bad. Good to have to posted here now. — Preston, Jan 17 '20 at 17:05

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

1 Answers1