Angular无法从Apollo GraphQL Server获取数据求助

1. 启用Apollo Client调试日志 #

默认Apollo Client不会输出详细日志，先开启调试模式抓线索：
在GraphQLModule的Apollo配置中添加logger和debug选项：

import { ApolloClientOptions, InMemoryCache } from '@apollo/client/core';
import { HttpLink } from 'apollo-angular/http';

export function createApollo(httpLink: HttpLink): ApolloClientOptions<any> {
  return {
    link: httpLink.create({ uri: '你的GraphQL服务器地址' }),
    cache: new InMemoryCache(),
    // 开启调试日志
    logger: console,
    debug: true,
  };
}

此时控制台会输出请求/响应的完整流程，哪怕静默失败也能找到原因。

2. 强制处理组件中的Query错误 #

很多时候组件只订阅数据、忽略错误回调，导致失败无提示：
在DummyComponent中完善订阅逻辑：

import { Component, OnInit } from '@angular/core';
import { PingGQLService } from './ping-gql.service';

@Component({
  selector: 'app-dummy',
  templateUrl: './dummy.component.html',
})
export class DummyComponent implements OnInit {
  pingData: any;
  errorMsg: string;

  constructor(private pingGQL: PingGQLService) {}

  ngOnInit(): void {
    this.pingGQL.watch()
      .valueChanges.subscribe({
        next: (res) => {
          this.pingData = res.data;
          console.log('数据返回:', this.pingData);
        },
        error: (err) => {
          this.errorMsg = err.message;
          console.error('请求报错:', err); // 强制打印错误详情
        }
      });
  }
}

同时在HTML中显示错误信息：

<div *ngIf="errorMsg" style="color: red;">{{ errorMsg }}</div>
<div *ngIf="pingData">返回数据: {{ pingData | json }}</div>

3. 验证GraphQL服务器可用性 #

直接用Postman/GraphQL Playground请求服务器的ping查询，确认接口本身正常：

query Ping {
  ping
}

如果服务器返回异常，先修复服务器配置；如果正常，再排查Angular端问题。

4. 修复依赖版本兼容性 #

apollo-angular 4.1.0要求@apollo/client版本至少为3.7.0，你当前用的3.0.0版本不兼容，会导致静默失败。执行命令升级：

npm install @apollo/client@^3.7.0 graphql@^16.0.0

注意：apollo-angular 4.x需要GraphQL 16+版本，需同步升级。

5. 检查GraphQLModule的导入配置 #

确保ApolloModule和HttpLinkModule已在AppModule中正确导入：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ApolloModule, APOLLO_OPTIONS } from 'apollo-angular';
import { HttpLinkModule, HttpLink } from 'apollo-angular/http';
import { InMemoryCache } from '@apollo/client/core';
import { AppComponent } from './app.component';
import { DummyComponent } from './dummy/dummy.component';
import { PingGQLService } from './ping-gql.service';

@NgModule({
  declarations: [AppComponent, DummyComponent],
  imports: [BrowserModule, ApolloModule, HttpLinkModule], // 必须导入这两个核心模块
  providers: [
    PingGQLService,
    {
      provide: APOLLO_OPTIONS,
      useFactory: (httpLink: HttpLink) => ({
        cache: new InMemoryCache(),
        link: httpLink.create({ uri: 'http://localhost:4000/graphql' }), // 确认服务器地址正确
      }),
      deps: [HttpLink],
    },
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

6. 排除代码生成工具的问题 #

如果用@graphql-codegen生成的服务有问题，先手动写一个简单的Query测试：

// 手动创建测试用服务
import { Injectable } from '@angular/core';
import { gql, Query } from 'apollo-angular';

const PingQuery = gql`
  query Ping {
    ping
  }
`;

@Injectable({ providedIn: 'root' })
export class PingTestService extends Query<{ ping: string }, {}> {
  document = PingQuery;
}

在组件中替换使用这个测试服务，若能正常获取数据，说明代码生成环节有问题，需检查生成配置或模板。

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