如何在角度模块以及GraphQL查询和变异中实现apollo-link-error?

时间:2019-08-14 19:29:03

标签: graphql apollo-client apollo-angular

我喜欢从阿波罗角文档中建议的全局设置。我不确定将errorLink放在选项中还是应该与httpLink分组。

最大的问题是:如何在代码中使用它?我在任何地方都找不到示例,也不知道如何开始。我还没有头脑中的阿波罗链接错误的概念。

app.module.ts

...
import { ApolloModule, APOLLO_OPTIONS } from 'apollo-angular';
import { HttpLinkModule, HttpLink } from 'apollo-angular-link-http';
import { onError } from 'apollo-link-error';

// This is just a copy and past from the docs at this time.

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

@NgModule({
  imports: [
    ...
  ],
  declarations: [
    ...
  ],
  providers: [
    ...
    { provide: APOLLO_OPTIONS,
      useFactory: (httpLink: HttpLink) => {
        return {
          cache: new InMemoryCache(),
          link: httpLink.create({
            uri: 'http://localhost:3000/graphql',
          }),
          options: {
            errorLink
          },
          defaultOptions: {
          }
        };
      },
      deps: [HttpLink]
    },
  ],

})
export class AppModule { }

带有查询的组件:

this.apollo
        .watchQuery({
            query: getAllMembers,
        })
        .valueChanges
        .subscribe(result => {
            if (result !== null) {
                this.dataSource.data = result.data['getMembers'];
            } else {
// What should be here???  This doesn't seem to work.
                console.log('errors ', result.errors);
            }
        });

1 个答案:

答案 0 :(得分:3)

我有同样的问题。 Apollo-link-error就像一个中间件,您可以用来在代码中的单个位置拦截错误,并对其进行一些常规的错误处理。 如果要将错误传播到服务或组件,则有一个额外的步骤: 我注意到,除非您使用以下命令,否则错误详细信息将从响应中删除:

# A tibble: 144 x 4
   variable  fluxmax      LOD   result
   <chr>       <dbl>    <dbl>    <dbl>
 1 mz31      0.00753 0.00569   0.00753
 2 mz33     -0.104   0.0125   -0.104  
 3 mz39      0.131   0.0302    0.131  
 4 mz42     -0.00644 0.00320  -0.00644
 5 mz45      0.0245  0.0331   NA      
 6 mz47     -0.0310  0.0112   -0.0310 
 7 mz59      0.0309  0.0160    0.0309 
 8 mz61     -0.0130  0.00163  -0.0130 
 9 mz69      0.0208  0.00638   0.0208 
10 mz71      0.00806 0.000455  0.00806
# ... with 134 more rows

这样,您可以检查服务上的响应,并查找“数据”和“错误”。 如果它是验证错误,则是带有错误对象的http 200。 然后,您可以将该错误传播到组件,并使用它在表单上显示错误消息。

有关更多信息:

sigaction(2) https://www.apollographql.com/docs/react/data/error-handling/

希望有帮助!