From 645c23421616818490169d534bfd7800a46c24c2 Mon Sep 17 00:00:00 2001 From: FlayInAHook Date: Fri, 4 Dec 2020 12:29:20 +0100 Subject: [PATCH] implemented a apollo error interceptor --- src/app/app.module.ts | 4 +- src/app/graphql.module.ts | 102 +++++++++------------------- src/app/helper/token.interceptor.ts | 2 +- 3 files changed, 34 insertions(+), 74 deletions(-) diff --git a/src/app/app.module.ts b/src/app/app.module.ts index f08986e..949ebbb 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -38,7 +38,7 @@ import { AppComponent } from './app.component'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { LoginComponent } from './pages/login/login.component'; import { BikesComponent } from './pages/tables/bikes/bikes.component'; -import { GraphQLModule2 } from './graphql.module'; +import { GraphQLModule } from './graphql.module'; import { ParticipantsComponent } from './pages/tables/participants/participants.component'; import { LendingStationsComponent } from './pages/tables/lending-stations/lending-stations.component'; import { TableOverviewComponent } from './pages/table-overview/table-overview.component'; @@ -126,7 +126,7 @@ import { HttpLinkModule } from 'apollo-angular-link-http'; MatProgressBarModule, MatCheckboxModule, MatSnackBarModule, - GraphQLModule2, + GraphQLModule, DragDropModule, MatTooltipModule, MatSelectModule, diff --git a/src/app/graphql.module.ts b/src/app/graphql.module.ts index 7f30c17..4e64641 100644 --- a/src/app/graphql.module.ts +++ b/src/app/graphql.module.ts @@ -1,29 +1,22 @@ -/*import { NgModule } from '@angular/core'; +import { NgModule } from '@angular/core'; import { APOLLO_OPTIONS } from 'apollo-angular'; import { ApolloClientOptions, - HttpLink, InMemoryCache, } from '@apollo/client/core'; -//import { HttpLink } from 'apollo-angular/http'; import { environment } from '../environments/environment'; import { DefaultOptions } from '@apollo/client/core/ApolloClient'; -//import { HttpLink } from 'apollo-link-http'; import { onError } from '@apollo/link-error'; +import {Apollo, gql} from 'apollo-angular'; +import {HttpLink} from 'apollo-angular/http'; +import { SnackBarService } from './services/snackbar.service'; + const uri = environment.apiUrl + '/graphql'; // <-- add the URL of the GraphQL server here -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 defaultOptions: DefaultOptions = { watchQuery: { @@ -36,9 +29,29 @@ const defaultOptions: DefaultOptions = { }, } -export function createApollo(httpLink: HttpLink): ApolloClientOptions { + + +export function createApollo(httpLink: HttpLink, snackBar: SnackBarService): ApolloClientOptions { + + const errorLink = onError(({ graphQLErrors, networkError }) => { + if (graphQLErrors) + graphQLErrors.map(({ message, locations, path }) => { + snackBar.openSnackBar(JSON.stringify(message), "Ok", true); + /*console.log( + `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`, + )*/ + }, + + ); + if (networkError) { + //console.log(`[Network error]: ${networkError}`); + // THE FOLLOWING CODE IS UNTESTED + snackBar.openSnackBar("Ein NetzwerkFehler ist aufgetreten", "Ok", true, [{"message": networkError}] ); + } + }); + return { - //link: errorLink.concat(new HttpLink({ uri })), + link: errorLink.concat(httpLink.create({ uri })), cache: new InMemoryCache({}), defaultOptions: defaultOptions, }; @@ -49,63 +62,10 @@ export function createApollo(httpLink: HttpLink): ApolloClientOptions { { provide: APOLLO_OPTIONS, useFactory: createApollo, - deps: [HttpLink], + deps: [HttpLink, SnackBarService], } ], }) -export class GraphQLModule {} - -*/ -import { Apollo } from 'apollo-angular'; -import { HTTP_INTERCEPTORS } from '@angular/common/http'; -import { TokenInterceptor } from './helper/token.interceptor'; -import { NgModule } from '@angular/core'; - -import { - ApolloClientOptions, - HttpLink, - InMemoryCache, -} from '@apollo/client/core'; - -import { environment } from '../environments/environment'; -import { onError } from '@apollo/link-error'; -//import { HttpLink } from 'apollo-angular-link-http'; - -//import { HttpLink } from 'apollo-link-http'; -//import { onError } from 'apollo-link-error'; - - -@NgModule({ - providers: [ - { provide: HTTP_INTERCEPTORS, useClass: TokenInterceptor, multi: true }, - ] -}) -export class GraphQLModule2 { - constructor( - apollo: Apollo, - ) { - const link = new HttpLink({ - uri: environment.apiUrl + '/graphql', - }); - 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}`); - }); - - apollo.create({ - link: errorLink.concat(link), - cache: new InMemoryCache() - }); +export class GraphQLModule { - } - - - - - -} \ No newline at end of file +} diff --git a/src/app/helper/token.interceptor.ts b/src/app/helper/token.interceptor.ts index 97d361f..86286a2 100644 --- a/src/app/helper/token.interceptor.ts +++ b/src/app/helper/token.interceptor.ts @@ -19,7 +19,7 @@ export class TokenInterceptor implements HttpInterceptor { constructor(private authService: AuthService, private snackBar : SnackBarService, private router: Router) { } intercept(request: HttpRequest, next: HttpHandler): Observable> { - console.log("i intercepted something"); + //console.log("i intercepted something"); if (this.authService.getRequestToken()) { request = this.addToken(request, this.authService.getRequestToken()); }