如何在 Angular 模块和 GraphQL 查询和突变中实现 apollo-link-error？答案

【问题标题】：How To Implement apollo-link-error In Angular Module And In GraphQL Queries And Mutations?如何在 Angular 模块和 GraphQL 查询和突变中实现 apollo-link-error？
【发布时间】：2019-12-21 09:03:48
【问题描述】：

我喜欢 apollo-angular 文档中建议的全局设置。我不确定是否将 errorLink 放入选项中，或者是否应将其与 httpLink 分组。

最大的问题是：如何在我的代码中使用它？我在任何地方都找不到示例，也不知道如何开始。我脑子里还没有 apollo-link-error 的概念。

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

【问题讨论】：

我无法真正说明这将如何在 Angular 上下文中工作，但错误链接背后的整个想法是进行通用错误处理——即它是为每个请求运行的逻辑。因此，如果您使用错误链接并在那里处理错误（记录它、显示对话框等），您希望不必在单个组件内进行任何额外的错误处理。
对于内部组件的微调错误处理，请参阅errorPolicy。
一如既往，感谢您的深刻洞察！我有 errorPolicy，但是下面的 Apollo Angular 文档中的这一行 errorPolicy 引起了我的兴趣：“使用 Apollo Link 时，处理网络错误的能力更加强大。”关于 errorLink 应该在我的模块中的位置有什么想法吗？ Apollo Angular 只是 Apollo 客户端。

标签： graphql apollo-client apollo-angular

【解决方案1】：

我遇到了同样的问题。 Apollo-link-error 就像一个中间件，您可以使用它来拦截代码中单个位置的错误，并使用它进行一些通用的错误处理。如果您想将该错误传播到服务或组件，还有一个额外的步骤：我注意到错误详细信息已从响应中删除，除非您使用：

apollo.watchQuery({
   ..., // options
   errorPolicy: 'all'
 });

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

希望对你有帮助！

【讨论】：

感谢 Mat Ron，我最终明白了这一点，但忘了回到这篇文章来更新它。我坏。很高兴现在必须在这里发布。