Angular Apollo Error Handling

Question

Hi everyone I am a bit stuck on a problem with apollo-angular and apollo-link-error. I've tried a few different ways and I can't seem to catch any errors client-side in my angular web app. I posted my attempts below. Any suggestions or an extra set of eyes would be much appreciated.

Basically all I am trying to do is when an error occurs to prompt my user about the problem. If anyone has some alternate npm package other than apollo-link-error I am all ears.

Attempt 1:

export class AppModule {
  constructor (apollo: Apollo, httpLink: HttpLink) {
    apollo.create({
      link: httpLink.create({
        uri: 'http://localhost:8080/graphql'
      }),
      cache: new InMemoryCache()
    });

    const error = onError(({ networkError }) => {
      const networkErrorRef:HttpErrorResponse = networkError as HttpErrorResponse;
      if (networkErrorRef && networkErrorRef.status === 401) {
        console.log('Prompt User', error);
      }
    });
  }
}

Attempt 2:

export class AppModule {
  constructor (apollo: Apollo, httpLink: HttpLink) {
    apollo.create({
      link: httpLink.create({
        uri: 'http://localhost:8080/graphql'
      }),
      cache: new InMemoryCache()
    });

    const error = onError(({networkError}) => {
      if (networkError.status === 401) {
        console.log('Prompt User', error);
      }
    });
  }
}

Attempt 3:

export class AppModule {
constructor (apollo: Apollo, httpLink: HttpLink) {
apollo.create({
  link: httpLink.create({
    uri: 'http://localhost:8080/graphql'
  }),
  cache: new InMemoryCache()
});

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

score 11 · Accepted Answer · answered Mar 22 '18 at 14:42

You can see apollo-link-error as a middleware so you have to add it to the fetching process in the apollo client.

Meaning that you have to create another apollo link which combines both the http and the error link:

import { ApolloLink } from 'apollo-link';
import { HttpLink } from 'apollo-link-http';
import { onError } from 'apollo-link-error';

...

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

const httpLink = new HttpLink({
   uri: "http://localhost:8080/graphql"
});

const httpLinkWithErrorHandling = ApolloLink.from([
   errorLink,
   httpLink,
]);

apollo.create({
  link: httpLinkWithErrorHandling,
  cache: new InMemoryCache()
});

...

cool, but as i make the link with "ApolloLink.from" all request stop working, if i change the order of the links setting the http one first then the requests works but no error get caught whatsoever... any guess on this? im using angular, and setting up apollo via "useFactory" function in a module. — Gianluca Pietrobon, Jul 23 '20 at 16:00
`Argument of type '{ uri: HttpClient; }' is not assignable to parameter of type 'HttpClient'.` — Muhammad Awais, Feb 24 '21 at 07:14
@AwaisNasir Please take a look at the documentation of the [apollo-http-link](https://www.apollographql.com/docs/react/api/link/apollo-link-http/#uri) — Locco0_0, Feb 24 '21 at 09:45

score 7 · Answer 2 · answered Mar 25 '18 at 00:28

Another possible solution:

import { HttpLink } from 'apollo-link-http';
import { onError } from 'apollo-link-error';

...

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

const link = httpLink.create({
  uri: environment.applications.mAPI.adminEndPoint,
});

apollo.create({
  link: errorLink.concat(link),
  cache: new InMemoryCache()
});

...

the order of the links matters in `errorLink.concat(link)` – Deepak Dec 03 '18 at 17:06 — Deepak, Dec 03 '18 at 17:06
`called .create method of undefined` error is coming – Muhammad Awais Feb 24 '21 at 07:22 — Muhammad Awais, Feb 24 '21 at 07:22

Angular Apollo Error Handling

2 Answers2