我有一个使用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 {}
在哪里显示错误?我想展示一个小吃店。有什么想法吗?
答案 0 :(得分:3)
创建赏金后不久,我找到了解决方案。因此,只需注入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'
});
就是这样!
如果有更优雅的解决方法,我很乐意接受其他答案。