Angular通过Apollo调用GraphQL Controller时query参数为null问题

这问题我之前帮同事排查过类似的，Postman正常但Angular端参数为空，大概率是请求格式、Apollo配置或者后端接收逻辑的不匹配，咱们一步步来捋：

1. 先对比浏览器和Postman的请求差异 #

打开Chrome开发者工具的Network标签，找到你的GraphQL请求，查看「Request Payload」，和Postman里的请求Body做对比：

• Postman里正常的请求体应该是类似这样的JSON结构：

  {
    "query": "query GetUser($id: ID!) { getUser(id: $id) { name } }",
    "variables": { "id": "123" }
  }
  

• 如果Angular发送的请求体里没有query字段，或者结构被修改了，那肯定会导致后端拿不到参数。

2. 检查Apollo客户端的调用代码 #

确保你在Angular里用Apollo发送查询的写法是正确的，比如：

import { gql } from 'apollo-angular';
import { Apollo } from 'apollo-angular';

// 组件内的调用逻辑
constructor(private apollo: Apollo) {}

getUser(id: string) {
  this.apollo.query({
    query: gql`
      query GetUser($id: ID!) {
        getUser(id: $id) {
          id
          name
        }
      }
    `,
    variables: { id } // 变量这里别写错
  }).subscribe(result => {
    console.log('返回数据:', result.data);
  });
}

重点确认：

• 用gql标签正确包裹了查询语句
• 变量variables配置正确（如果有的话）
• 没有手动修改请求体的结构

3. 排查后端Controller的参数接收方式 #

如果后端是Spring Boot这类框架，要确保你是通过请求体接收GraphQL参数，而不是用QueryParam：
正确的后端写法示例（Java）：

// 定义接收请求的实体类
public class GraphQLRequest {
    private String query;
    private Map<String, Object> variables;
    
    // 省略getter/setter
}

// Controller层
@PostMapping("/graphql")
public ResponseEntity<Object> executeGraphQL(@RequestBody GraphQLRequest request) {
    // 处理query和variables
    return ResponseEntity.ok(graphQLService.executeQuery(request.getQuery(), request.getVariables()));
}

如果你的后端用了@RequestParam("query") String query，那Postman里可能是通过URL参数或Form Data传的，但Apollo默认是把query放在POST请求的Body里，自然会拿不到值。

4. 检查Angular的HTTP拦截器 #

如果项目里有全局HTTP拦截器，可能会在添加token、修改请求头的时候不小心篡改了GraphQL的请求体。可以暂时注释掉拦截器的代码，重新测试请求：

• 如果注释后请求正常，那就要修改拦截器逻辑，确保它不对GraphQL请求的Body做额外修改，或者单独处理GraphQL接口。

5. 确认Apollo的基础配置 #

检查app.module.ts里的Apollo配置是否正确：

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

export function createApollo(httpLink: HttpLink) {
  return {
    link: httpLink.create({ uri: '/graphql' }), // 确保地址和后端一致
    cache: new InMemoryCache(),
    // 不要额外添加会修改请求体的配置
  };
}

@NgModule({
  imports: [ApolloModule],
  providers: [
    {
      provide: APOLLO_OPTIONS,
      useFactory: createApollo,
      deps: [HttpLink],
    },
  ],
})
export class AppModule {}

按照上面的步骤排查，基本就能定位到问题所在了。

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