如何在Angular中不使用Apollo Client使用GraphQL？能否用HttpClient/fetch？

当然可行，不管是Angular自带的HttpClient还是浏览器原生的fetch API，都能直接调用GraphQL API，不需要依赖Apollo这类客户端库。下面是具体实现方式：

使用Angular HttpClient实现 #

1. 导入HttpClientModule #

首先确保在根模块（如AppModule）中导入HttpClientModule，这是Angular发送HTTP请求的基础：

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    // ...其他模块导入
    HttpClientModule
  ]
})
export class AppModule { }

2. 封装GraphQL请求服务 #

创建一个可复用的服务来统一处理GraphQL请求，避免重复代码：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class GraphqlApiService {
  private readonly graphqlEndpoint = 'https://your-graphql-api-endpoint.com/graphql';

  constructor(private http: HttpClient) { }

  executeQuery<T>(query: string, variables?: Record<string, any>): Observable<{ data: T; errors?: any[] }> {
    return this.http.post<{ data: T; errors?: any[] }>(this.graphqlEndpoint, {
      query,
      variables
    });
  }
}

3. 在组件中调用服务 #

在业务组件中注入服务，执行具体的GraphQL查询：

import { Component, OnInit } from '@angular/core';
import { GraphqlApiService } from './graphql-api.service';

@Component({
  selector: 'app-user-list',
  template: `<div *ngFor="let user of users">{{user.name}} ({{user.email}})</div>`
})
export class UserListComponent implements OnInit {
  users: any[] = [];

  constructor(private graphqlService: GraphqlApiService) { }

  ngOnInit(): void {
    const getUserQuery = `
      query GetUsers($limit: Int!) {
        users(limit: $limit) {
          id
          name
          email
        }
      }
    `;

    this.graphqlService.executeQuery(getUserQuery, { limit: 10 }).subscribe({
      next: (response) => {
        if (response.errors) {
          // 处理GraphQL业务错误（如权限不足、参数错误）
          console.error('GraphQL错误:', response.errors);
          return;
        }
        this.users = response.data.users;
      },
      error: (httpError) => {
        // 处理HTTP层面错误（如API地址错误、服务器崩溃）
        console.error('HTTP请求失败:', httpError);
      }
    });
  }
}

使用原生fetch API实现 #

如果不想依赖Angular的HttpClient，也可以直接用浏览器原生的fetch API，无需额外导入模块：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-post-list',
  template: `<div *ngFor="let post of posts">{{post.title}}</div>`
})
export class PostListComponent implements OnInit {
  posts: any[] = [];
  private readonly graphqlEndpoint = 'https://your-graphql-api-endpoint.com/graphql';

  async ngOnInit(): Promise<void> {
    const getPostsQuery = `
      query GetPosts($category: String) {
        posts(category: $category) {
          id
          title
          content
        }
      }
    `;

    try {
      const response = await fetch(this.graphqlEndpoint, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          query: getPostsQuery,
          variables: { category: 'tech' }
        })
      });

      const result = await response.json();
      if (result.errors) {
        console.error('GraphQL错误:', result.errors);
        return;
      }
      this.posts = result.data.posts;
    } catch (error) {
      console.error('请求失败:', error);
    }
  }
}

关键注意事项 #

• GraphQL API默认接受POST请求（少数支持GET，但POST是标准），必须设置请求头Content-Type: application/json。
• 请求体必须包含query字段，需要传参时添加variables字段，格式严格遵循JSON规范。
• 即使HTTP响应状态码为200，也要检查返回结果中的errors字段——这是GraphQL返回业务错误的标准方式。
• 建议将请求逻辑封装到服务中，避免在组件中重复编写请求代码，便于维护和复用。

内容的提问来源于stack exchange，提问作者Anwsh