作者:JJJppp123 | 来源:互联网 | 2022-12-23 14:27
大家好,我对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}`);
});
}
}
Locco0_0..
6
您可以将其apollo-link-error
视为中间件,因此必须将其添加到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.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
另一种可能的方案
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()
});
...
1> Locco0_0..:
您可以将其apollo-link-error
视为中间件,因此必须将其添加到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.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()
});
...
2> 小智..:
另一种可能的方案
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()
});
...