Apollo GraphQL - проблема watchQuery и networkErrors - PullRequest
Новая
       21

Apollo GraphQL - проблема watchQuery и networkErrors

1 голос
/ 10 июня 2019

TL; DR;

Когда сервер graphQL недоступен, флаг загрузки watchQuery никогда не меняется на false, поэтому обработку ошибок следует выполнять с помощью apollo-link-error.

Есть ли способ решить проблему с watchQuery?

Я разработал небольшое приложение Angular GraphQL.Одна из функций вызывает простой запрос, подобный следующему: 

  this.apollo
    .watchQuery<any>({
      query: this.BookingByID,
      variables: {
        bookingCode: id
      }
    })
    .valueChanges.subscribe(result => {
      this.booking = result.data.booking;
      this.loading = result.loading;
      this.error = result.errors;
    });

Я хотел проверить поведение приложения при сбое в работе сети или сервера Graphql.Это сценарии, которые я попробовал.

  • Нет подключения к Интернету
  • Сервер GraphQL недоступен.

Нет подключения к Интернету

Без подключения к интернету this.error работает нормально.Я могу обнаружить ошибку и отобразить правильное сообщение.

Сервер GraphQL недоступен

Когда сервер GraphQL недоступен, возникла проблема.Состояние загрузки запроса остается «истинным», даже когда я получаю сетевую ошибку.(Ошибка Apollo. Код 0. Неизвестная ошибка).

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

import { NgModule } from '@angular/core';
import { ApolloModule, APOLLO_OPTIONS } from 'apollo-angular';
import { HttpLinkModule, HttpLink } from 'apollo-angular-link-http';
import { InMemoryCache} from 'apollo-cache-inmemory';
import { onError } from 'apollo-link-error';

const uri = 'http://localhost:4000'; // <-- add the URL of the GraphQL server here

export function createApollo( httpLink: HttpLink ) {
  const http = httpLink.create({uri});
  const error = onError(({networkError}) => {
    console.log(networkError);
  });

  return {
    link: error.concat(http),
    cache: new InMemoryCache(),
    defaultOptions: {
      watchQuery: {
        errorPolicy: 'all'
      }
    }
  };
}

@NgModule({
  exports: [ApolloModule, HttpLinkModule],
  providers: [
    {
      provide: APOLLO_OPTIONS,
      useFactory: createApollo,
      deps: [HttpLink],
    },
  ],
})
export class GraphQLModule {}

После реализации apollo-link-error я могу увидеть ошибку в консоли браузера.Но мне все еще интересно, почему индикатор состояния загрузки watchQuery не меняется с загрузки = true на загрузку = false.

template.html 

<p *ngIf="loading">Loading...</p>
<p *ngIf="error">{{ error | json }}</p>

Если решениесостоит в том, чтобы перейти к подходу apollo-link-error, как это правильно сделать?Как я должен уведомить мнение об ошибке?Параметр?Маршрут?Есть ли лучшая практика?Я что-то здесь упускаю?

Заранее спасибо,

Гильермо

...