web-dev-qa-db-ja.com

Angular Apolloエラー処理

みなさん、こんにちは。私はapollo-angularとapollo-link-errorの問題で少し立ち往生しています。私はいくつかの異なる方法を試しましたが、angular Webアプリでクライアント側のエラーをキャッチできないようです。以下に私の試みを投稿しました。提案や追加の目よろしくお願いします。

基本的に私がやろうとしているのは、エラーが発生したときにユーザーに問題についてプロンプトを表示することだけです。誰かがapollo-link-error以外の代替npmパッケージを持っているなら、私はすべての耳です。

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

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

試行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}`);
  });
 }
}
angulartypescriptapolloapollo-client
9
Galactic Ranger

apollo-link-errorはミドルウェアとして表示されるため、apolloクライアントのフェッチプロセスに追加する必要があります。

つまり、httpリンクとエラーリンクの両方を組み合わせた別のapolloリンクを作成する必要があります。

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

...
6
Locco0_0

別の可能な解決策：

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

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

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

...
6
Khalid