Обработка ошибок Angular Apollo

Привет всем, я немного застрял в проблеме с apollo-angular и apollo-link-error. Я пробовал несколько разных способов, и я не могу обнаружить никаких ошибок на стороне клиента в моем веб-приложении angular. Я разместил свои попытки ниже. Будем очень признательны за любые предложения или дополнительную пару глаз.

По сути, все, что я пытаюсь сделать, это когда возникает ошибка, чтобы побудить моего пользователя о проблеме. Если у кого-то есть альтернативный пакет npm, отличный от apollo-link-error, я все слышу.

Попытка 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.info('Prompt User', error);
      }
    });
  }
}

Попытка 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.info('Prompt User', error);
      }
    });
  }
}

Попытка 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.info(
        `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`,
      ),
    );
    if (networkError) console.info(`[Network error]: ${networkError}`);
  });
 }
}
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
11
0
6 203
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Вы можете рассматривать apollo-link-error как промежуточное ПО, поэтому вам нужно добавить его в процесс выборки в клиенте apollo.

Это означает, что вам нужно создать еще одну ссылку apollo, которая объединяет как http, так и ссылку с ошибкой:

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.info(
        `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`,
      ),
    );
    if (networkError) console.info(`[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()
});

...

круто, но когда я делаю ссылку с «ApolloLink.from», все запросы перестают работать, если я изменяю порядок ссылок, устанавливая сначала http, тогда запросы работают, но никаких ошибок не обнаруживается ... какие-либо предположения по этому поводу? Я использую angular и настраиваю apollo с помощью функции useFactory в модуле.

Gianluca Pietrobon 23.07.2020 18:00
Argument of type '{ uri: HttpClient; }' is not assignable to parameter of type 'HttpClient'.
Awais Nasir 24.02.2021 08:14

@AwaisNasir Пожалуйста, взгляните на документацию apollo-http-ссылка

Locco0_0 24.02.2021 10:45

Другое возможное решение:

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.info(
        `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`,
      ),
    );
    if (networkError) console.info(`[Network error]: ${networkError}`);
  });
 }
}

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

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

...

порядок ссылок имеет значение в errorLink.concat(link)

Deepak 03.12.2018 18:06

Приближается ошибка called .create method of undefined

Awais Nasir 24.02.2021 08:22

Другие вопросы по теме