如何解决当Apollo GraphQL失败并显示错误时显示MatSnackBar消息
我有一个使用Angular 10和Apollo GraphQL的网站。
每当请求失败时,我都想使用MatSnackBar
向用户显示错误,但是我不知道如何为{的MatSnackBar
函数提供OnError()
组件{1}}。
这是我的apollo-link-error
代码:
graphql.module.ts
使用import {NgModule} from '@angular/core';
import {APOLLO_OPTIONS} from 'apollo-angular';
import {ApolloClientOptions,ApolloLink,InMemoryCache} from '@apollo/client/core';
import {HttpLink} from 'apollo-angular/http';
import { onError } from 'apollo-link-error';
function getNewToken(): any {
//TODO: need to implement
}
const errorLink = onError(({ graphQLErrors,networkError,operation,forward }) => {
if (graphQLErrors) {
for (const err of graphQLErrors) {
switch (err.extensions?.code) {
case 'UNAUTHENTICATED':
// error code is set to UNAUTHENTICATED
// when AuthenticationError thrown in resolver
// modify the operation context with a new token
const oldHeaders = operation.getContext().headers;
operation.setContext({
headers: {
...oldHeaders,authorization: getNewToken(),},});
// retry the request,returning the new observable
return forward(operation);
}
}
graphQLErrors.map(({ message,locations,path }) =>
console.log(
`[GraphQL error]: Message: ${message},Location: ${locations},Path: ${path}`,),);
}
if (networkError) {
console.log(`[Network error]: ${networkError}`);
// if you would also like to retry automatically on
// network errors,we recommend that you use
// apollo-link-retry
}
}
);
const uri = 'http://localhost:8081/graphql';
export function createApollo(httpLink: HttpLink): ApolloClientOptions<any> {
const httpLinkHandler = httpLink.create({uri});
const httpLinkWithErrorHandling = ApolloLink.from([
// @ts-ignore
errorLink,httpLinkHandler,]);
return {
link: httpLinkWithErrorHandling,cache: new InMemoryCache(),};
}
@NgModule({
providers: [
{
provide: APOLLO_OPTIONS,useFactory: createApollo,deps: [HttpLink],],})
export class GraphQLModule {}
在哪里显示错误?我想展示一个小吃店。有什么想法吗?
解决方法
创建赏金后不久,我找到了解决方案。因此,只需注入MatSnackbar
,然后将其复制到要在错误对象中使用的局部变量中即可。
因此,在提供程序依赖性中,我将MatSnackBar
添加到了依赖性中:
@NgModule({
providers: [
{
provide: APOLLO_OPTIONS,useFactory: createApollo,deps: [HttpLink,MatSnackBar],},],})
export class GraphQLModule {}
然后在createApollo()
函数中,将matSnackBar
复制到本地变量:
export function createApollo(httpLink: HttpLink,matSnackBar: MatSnackBar): ApolloClientOptions<any> {
localMatSnackbar = matSnackBar;
然后在onError()
处理程序中,我在发生网络错误时使用了它:
if (networkError) {
localMatSnackbar?.open(networkError.message,'DISMISS',{
duration: 2000,verticalPosition: 'top'
});
就是这样!
如果有更优雅的解决方法,我很乐意接受其他答案。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。