![](/img/trans.png)
[英]Error Handling For Undefined From Subscription - Apollo and Angular 2
[英]Angular Apollo Error Handling
大家好,我对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, 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}`);
});
}
}
另一种可能的方案
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() }); ...
您可以将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() }); ...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.