如何使用从角度'apollo-link-error'导入 { onError } 来处理所有错误

Question

以下是我对apollo angular的设置代码：

providers: [
{
provide: APOLLO_OPTIONS,
useFactory: (httpLink: HttpLink) => {
return {
cache: new InMemoryCache(),
link: httpLink.create({
uri: AppSettings.API_ENDPOINT
})
}
},
deps: [HttpLink]
}
],

我想在下面使用：

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}`);
});

如何链接它以便能够在控制台中收到错误？

Answer 1

以下是我如何使用"apollo-link-error">来处理graphQL错误和网络错误。我创建了一个单独的模块，称为apollo-clients-module.ts，并将其导入到app.module.ts和我拥有的其他功能模块上。

apollo-clients-module.ts 代码 ：

import { NgModule } from "@angular/core";
import { HttpLink } from "apollo-angular-link-http";
import { InMemoryCache } from "apollo-cache-inmemory";
import { Apollo, ApolloModule } from "apollo-angular";
import { ApolloLink } from 'apollo-link';
import { onError } from "apollo-link-error";
@NgModule({
declarations: [],
imports: [ApolloModule]
})
export class ApolloClientsModule {
constructor(private apollo: Apollo, private httpLink: HttpLink) {
const link = onError(({ graphQLErrors, networkError }) => {
if(graphQLErrors){
graphQLErrors.map(({ message, locations, path }) => {
// Here you may display a message to indicate graphql error
// You may use 'sweetalert', 'ngx-toastr' or any of your preference
console.log(`[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`);
})
}
if(networkError){
// Here you may display a message to indicate network error
console.log(`[Network error]: ${networkError}`);
}
});
apollo.create(
{
link : ApolloLink.from([link, httpLink.create({ uri: "/end-point-uri-goes-here/graphql" })]) ,
cache: new InMemoryCache(),
defaultOptions : {
watchQuery : {
fetchPolicy : 'network-only',
errorPolicy : 'all'
}
}
},
"default"
);  
}
}

记住"npm install apollo-link-error">

访问 https://www.apollographql.com/docs/angular/features/error-handling/了解更多信息。

Answer 2

我昨天刚刚让它工作，所以没有伟大的专家，但我认为它符合您的要求。 我在网上也找不到一个好的例子。

这将触发视图上的对话，其中包含您想要的任何消息。 我没有包含对话框代码，但它存在于我的消息服务中。

请注意，我在那里留下了 InMemoryCache，作为不需要的响应的注释。 它包含在加速和自动设置中。 我能够用readQuery阅读它。

我使用了 Boost，我把它放在导出类的 app.module 中，因为我无法让它在模块提供程序中工作。 最初我像你一样设置，但到达消息服务没有成功。 它也可能是一项服务，我可能会把它移到那里。 这是全局的，您不必在组件中执行任何操作。很好！

app.module.ts

export class AppModule {
// Create and setup the Apollo server with error catching globally.
constructor(
private messagesService: MessagesService,
private apollo: ApolloBoost,
) {
apollo.create({
uri: 'http://localhost:3000/graphql',
// cache: new InMemoryCache(),  // This is included by default.  Can be modified.
onError: ({ graphQLErrors, networkError }) => {
if (graphQLErrors) {
graphQLErrors.map(({ message, locations, path }) =>
console.log(
`[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`),
console.log('This is a graphQL error!'),
);
const msg1 = 'GraphQL error';
const msg2 = 'Please contact support.';
this.handleError(msg1, msg2)
}
if (networkError) {
console.log('This is a Network Error!', networkError);
console.log('Can be called from a query error in the browser code!');
const msg1 = 'Network error';
const msg2 = 'Please check your Internet connection.  If OK then contact support .';
this.handleError(msg1, msg2)
}
}
});
}

public handleError(msg1, msg2) {
this.messagesService.openDialog(msg1, msg2);
}
}