Angular18集成apollo-angular调用GitHub接口一直处于pending状态

在 Angular 18 中集成 apollo-angular 后，尝试从 GitHub 获取数据时，网络请求一直处于 pending 状态，无任何响应。

Apollo 配置代码 #

import { ApplicationConfig, inject } from "@angular/core";
import { ApolloClientOptions, ApolloLink, InMemoryCache } from "@apollo/client/core";
import { setContext } from "@apollo/client/link/context";
import { Apollo, APOLLO_OPTIONS } from "apollo-angular";
import { HttpLink } from "apollo-angular/http";

export const githubData = {
  token: "ghp_M4T0mxxxxxxxUqnI4BHWyD6dGmQLk3Fovcb",
};

const uri = "https://api.github.com/graphql";

const header = setContext((operation, context) => ({
  headers: {
    Accept: "charset=utf-8",
  },
}));

const auth = setContext((operation, context) => {
  const token = localStorage.getItem("token");

  if (token === null) {
    return {};
  } else {
    return {
      headers: {
        Authorization: "bearer " + githubData["token"],
      },
    };
  }
});

export function apolloOptionsFactory(): ApolloClientOptions<any> {
  const httpLink = inject(HttpLink);
  const link = ApolloLink.from([header, auth, httpLink.create({ uri })]);
  return {
    link: link,
    cache: new InMemoryCache(),
  };
}

export const graphqlProvider: ApplicationConfig["providers"] = [
  Apollo,
  {
    provide: APOLLO_OPTIONS,
    useFactory: apolloOptionsFactory,
  },
];

服务代码 #

import { Injectable } from "@angular/core";
import { gql, Query } from "apollo-angular";

@Injectable({
  providedIn: "root",
})
export class GitServiceService extends Query<Response> {
  document = gql`
    query {
      user(login: "3gwebtrain") {
        issues(first: 10) {
          nodes {
            title
            body
            closedAt
          }
        }
      }
    }
  `;
}

组件代码 #

import { Component, inject, OnInit } from "@angular/core";
import { RouterOutlet } from "@angular/router";

import { GitServiceService } from "./services/git-service.service";
@Component({
  selector: "app-root",
  standalone: true,
  imports: [RouterOutlet],
  templateUrl: "./app.component.html",
  styleUrl: "./app.component.scss",
})
export class AppComponent implements OnInit {
  gitService = inject(GitServiceService);
  ngOnInit(): void {
    console.log("Hellow there");
    this.gitService.watch().valueChanges.subscribe((data) => console.log("data", data));
  }
}

问题排查与解决 #

1. 上下文链接 headers 被覆盖 #

当前的 header 和 auth 两个 setContext 链接独立设置 headers，后一个会完全覆盖前一个的 headers，导致 Accept 头丢失。修改 auth 链接代码，合并已有 headers：

const auth = setContext((operation, context) => {
  const token = localStorage.getItem("token");
  const existingHeaders = context.headers || {};

  if (token === null) {
    return { headers: existingHeaders };
  } else {
    return {
      headers: {
        ...existingHeaders,
        Authorization: "bearer " + githubData["token"],
      },
    };
  }
});

2. Token 逻辑矛盾 #

代码中判断 localStorage.getItem("token") 是否为空，但实际使用的是固定的 githubData["token"]。如果 localStorage 中没有 token，请求会缺失 Authorization 头，GitHub API 会拒绝请求，进而导致请求异常挂起。直接移除 localStorage 判断，确保请求始终携带授权头：

const auth = setContext((operation, context) => {
  const existingHeaders = context.headers || {};
  return {
    headers: {
      ...existingHeaders,
      Authorization: "bearer " + githubData["token"],
    },
  };
});

3. 确认 Apollo 客户端初始化 #

在 Angular 18 独立组件模式下，确保 graphqlProvider 已正确添加到 bootstrapApplication 的 providers 中：

bootstrapApplication(AppComponent, {
  providers: [...graphqlProvider]
});

4. 添加错误捕获定位问题 #

当前代码未处理请求错误，添加错误捕获可以直接查看请求失败原因：

this.gitService.watch().valueChanges.subscribe({
  next: (data) => console.log("data", data),
  error: (err) => console.error("请求错误:", err)
});

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