角度Apollo错误处理

大家好,我对apollo-angular和apollo-link-error的问题有点困惑.我尝试了几种不同的方法,我似乎无法在我的角度网络应用程序中捕获客户端的任何错误.我在下面发布了我的尝试.任何建议或一组额外的眼睛将非常感激.

基本上我所要做的就是当发生错误时提示我的用户有关问题.如果有人有一些替代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.log('Prompt User',error);
      }
    });
  }
}

尝试2：

export class AppModule {
  constructor (apollo: Apollo,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}`);
  });
 }
}

您可以将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,);
    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()
});

...

原文链接：/angularjs/240361.html

角度Apollo错误处理

猜你在找的Angularjs相关文章