Как использовать import {onError} из 'apollo-link-error' в angular для обработки всех ошибок

Ниже приведен мой установочный код для apollo angular:

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

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

Я хочу использовать ниже:

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

Как я могу связать это, чтобы я мог получать ошибки в консоли?


angular graphql apollo-angular
person Sunny G    schedule 16.08.2019    source источник
comment
Привет и добро пожаловать в Stack Overflow! У вас есть ошибки в консоли? Каково реальное поведение вашего текущего приложения, т.е. почему оно не работает в данный момент?   -  person Patrick    schedule 16.08.2019
comment
Я хочу использовать OnError для обработки ошибок, но не могу получить подробный пример его использования.   -  person Sunny G    schedule 16.08.2019
comment
Я бы подумал, что при сбое он выйдет из строя, и вы увидите их в консоли своего браузера.   -  person technogeek1995    schedule 16.08.2019
comment
@ technogeek1995 да, но я хочу отображать ошибки graphql на страницах моего сайта   -  person Sunny G    schedule 17.08.2019
comment
Не знаю, как, но я бы отредактировал ваш вопрос, чтобы прояснить, чего вы пытаетесь достичь   -  person technogeek1995    schedule 17.08.2019

Ответы (2)


arrow_upward
4
arrow_downward

Вот как я использую 'apollo-link-error' для обработки ошибок graphQL и сетевых ошибок. Я создал отдельный модуль под названием apollo-clients-module.ts и импортировал его в app.module.ts и другие функциональные модули, которые у меня есть.

Код apollo-clients-module.ts:

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

}

Не забудьте "npm install apollo-link-error"

Посетите https://www.apollographql.com/docs/angular/features/error-handling/ для получения дополнительной информации.

person don    schedule 03.09.2019

arrow_upward
0
arrow_downward

Я только вчера заставил это работать, так что я не большой эксперт в этом, но я думаю, что он делает то, о чем вы просите. В сети я тоже не нашел хорошего примера.

Это вызовет диалог над вашими представлениями с любыми сообщениями, которые вы хотите. Я не включил код диалога, но он находится в моем messagesService.

Обратите внимание, что я оставил там InMemoryCache в качестве примечания для таких ответов, как этот, что он не нужен. Он включен в Boost и настраивается автоматически. Я смог прочитать его с помощью readQuery.

Я выбрал Boost и поместил его в app.module в экспортированном классе, потому что я не мог заставить его работать выше в поставщиках модулей. Первоначально я был настроен так же, как и вы, но добраться до messagesService не удалось. Это также может быть сервис, и я могу его туда перенести. Это глобально, и вам не нужно ничего делать в ваших компонентах. Очень хорошо!

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

}
person Preston    schedule 17.08.2019