如何在angular for graphql中使用apollo客户端处理错误？

npm install apollo-angular apollo-angular-link-http

ng generate service graphql

import { Injectable } from '@angular/core';
import { Apollo } from 'apollo-angular';
import { ApolloClient, InMemoryCache } from '@apollo/client/core';
import { HttpLink } from 'apollo-angular/http';
import { onError } from '@apollo/client/link/error';

@Injectable({
  providedIn: 'root'
})
export class GraphqlService {
  private apolloClient: ApolloClient<any>;

  constructor(private apollo: Apollo, private httpLink: HttpLink) {
    const errorLink = onError(({ graphQLErrors, networkError }) => {
      if (graphQLErrors) {
        graphQLErrors.forEach(({ message, locations, path }) => {
          console.error(
            `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`
          );
        });
      }

      if (networkError) {
        console.error(`[Network error]: ${networkError}`);
      }
    });

    const httpLinkWithMiddleware = errorLink.concat(httpLink.create({ uri: 'YOUR_GRAPHQL_ENDPOINT' }));

    this.apolloClient = new ApolloClient({
      link: httpLinkWithMiddleware,
      cache: new InMemoryCache()
    });

    this.apollo.setClient(this.apolloClient);
  }
}

import { Component, OnInit } from '@angular/core';
import { GraphqlService } from 'path/to/graphql.service';
import { ApolloQueryResult } from '@apollo/client/core';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent implements OnInit {
  constructor(private graphqlService: GraphqlService) {}

  ngOnInit(): void {
    this.graphqlService.apolloClient
      .watchQuery({
        query: YOUR_GRAPHQL_QUERY
      })
      .valueChanges.subscribe((result: ApolloQueryResult<any>) => {
        // 处理查询结果
      });
  }
}