Hey everyone, I'm facing a problem with apollo-angular and apollo-link-error that I just can't seem to figure out. I've experimented with different approaches but have had no luck catching errors on the client-side of my angular web app. Below are the attempts I've made. Any advice or fresh perspectives would be greatly appreciated.
Essentially, what I want to achieve is to notify users when an error occurs. If anyone knows of another npm package besides apollo-link-error that could help me accomplish this, I'm open to suggestions.
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}`);
});
}
}