How to use import { onError } from 'apollo-link-error' in angular to handle all errors

Question

Below is my setup code for apollo angular:

providers: [
    {
      provide: APOLLO_OPTIONS,
      useFactory: (httpLink: HttpLink) => {
        return {
          cache: new InMemoryCache(),
          link: httpLink.create({
            uri: AppSettings.API_ENDPOINT

          })
        }
      },
      deps: [HttpLink]
    }
  ],

I want to use below :

const link = 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}`);
});

How can I link this so I am able to get errors in the console?

Hi and Welcome to Stack Overflow! Do you get any errors in your console? What is the actual behaviour of your current application, i.e. why is it not working at the moment? — Patrick, Aug 16 '19 at 12:28
I want to use OnError to handle errors but not getting detail example to use it. — Sunny G, Aug 16 '19 at 12:29
I would think it would crash on failure and you would see them in your browser's console. — technogeek1995, Aug 16 '19 at 12:38
@technogeek1995 yes right, but i want to display graphql erros on my site pages — Sunny G, Aug 17 '19 at 05:09
I don’t know how, but I would edit your question to add clarity for what you’re trying to accomplish — technogeek1995, Aug 17 '19 at 13:16

score 5 · Answer 1 · answered Sep 03 '19 at 08:35

Here is how I use 'apollo-link-error' to handle graphQL errors and Network errors. I have created a separate module called apollo-clients-module.ts and imported it on app.module.ts and other feature modules i have.

apollo-clients-module.ts code :

import { NgModule } from "@angular/core";
import { HttpLink } from "apollo-angular-link-http";
import { InMemoryCache } from "apollo-cache-inmemory";
import { Apollo, ApolloModule } from "apollo-angular";
import { ApolloLink } from 'apollo-link';
import { onError } from "apollo-link-error";

@NgModule({
  declarations: [],
  imports: [ApolloModule]
})
export class ApolloClientsModule {

  constructor(private apollo: Apollo, private httpLink: HttpLink) {

    const link = onError(({ graphQLErrors, networkError }) => {
      if(graphQLErrors){
        graphQLErrors.map(({ message, locations, path }) => {
          // Here you may display a message to indicate graphql error
          // You may use 'sweetalert', 'ngx-toastr' or any of your preference
          console.log(`[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`);
        })
      }
      if(networkError){
          // Here you may display a message to indicate network error
          console.log(`[Network error]: ${networkError}`);
      }
    });

    apollo.create(
      {
        link : ApolloLink.from([link, httpLink.create({ uri: "/end-point-uri-goes-here/graphql" })]) ,
        cache: new InMemoryCache(),
        defaultOptions : {
          watchQuery : {
            fetchPolicy : 'network-only',
            errorPolicy : 'all'
          }
        }
      },
      "default"
    );  
  }

}

Remember to 'npm install apollo-link-error'

Visit https://www.apollographql.com/docs/angular/features/error-handling/ for more information.

score 1 · Answer 2 · answered Aug 17 '19 at 15:55

I just got this to work yesterday so no great expert on this but I think it does what you are asking. I couldn't find a good example online either.

This will trigger a dialog over your views with whatever messages you want. I didn't include the dialog code but it lives in my messagesService.

Notice that I left InMemoryCache in there as a note for responses such as this that it isn't needed. It is included in Boost and setup automatically. I was able to read it with readQuery.

I went with Boost and I put it in app.module in the exported class because I couldn't get it to work above in the module providers. Originally I was setup like you did but reaching the messagesService didn't work out. It could also be a service and I may move it there. This is global and you don't have to do anything in your components. Very nice!

app.module.ts

export class AppModule {

// Create and setup the Apollo server with error catching globally.
  constructor(
      private messagesService: MessagesService,
      private apollo: ApolloBoost,
  ) {
    apollo.create({
      uri: 'http://localhost:3000/graphql',
      // cache: new InMemoryCache(),  // This is included by default.  Can be modified.
      onError: ({ graphQLErrors, networkError }) => {
        if (graphQLErrors) {
          graphQLErrors.map(({ message, locations, path }) =>
              console.log(
                  `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`),
              console.log('This is a graphQL error!'),
          );
          const msg1 = 'GraphQL error';
          const msg2 = 'Please contact support.';
          this.handleError(msg1, msg2)
        }
        if (networkError) {
          console.log('This is a Network Error!', networkError);
          console.log('Can be called from a query error in the browser code!');
          const msg1 = 'Network error';
          const msg2 = 'Please check your Internet connection.  If OK then contact support .';
          this.handleError(msg1, msg2)
        }
      }
    });
  }


  public handleError(msg1, msg2) {
    this.messagesService.openDialog(msg1, msg2);
  }

}

How to use import { onError } from 'apollo-link-error' in angular to handle all errors

2 Answers2