GraphQL POST请求返回400且JSON.stringify报循环结构错误如何解决

报错原因与修复方案 #

1. 循环序列化报错修复 #

TypeError: Converting circular structure to JSON报错的根因是你调用JSON.stringify时传入的对象包含循环引用（多为误将axios内部的请求实例、关联的socket对象传入序列化方法），你定义的纯查询对象本身无循环引用，只要调整序列化的位置即可，不要把axios配置对象/返回值传入序列化方法。

2. GraphQL 400状态码修复 #

400状态码多为请求体格式不符合GraphQL服务端要求，优先排查以下两点：

• 绝大多数GraphQL服务端要求请求体必须携带variables字段，即使无参数也要传入空对象{}，你当前的请求体缺失该字段。
• axios默认会自动将JS类型的data序列化为JSON字符串，不需要手动转换，只要Content-Type配置正确即可正常传输。

可直接运行的正确代码 #

try {
  const result = await axios({
    url: "https://exampleurl.com",
    method: 'POST',
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json',
    },
    data: {
      query: `query {
                footer {
                  title
                }
              }`,
      // 补充必填的空variables字段
      variables: {}
    },
  })
  console.log('请求成功', result.data)
} catch (err) {
  // 打印服务端返回的具体错误信息，可直接定位语法/参数问题
  console.log('请求错误详情：', err.response?.data)
}

手动序列化的正确写法 #

如果需要手动做JSON序列化，单独定义纯数据对象再序列化即可：

// 单独定义纯请求数据对象，无任何外部引用
const reqData = {
  query: `query {
            footer {
              title
            }
          }`,
  variables: {}
}

const result = await axios({
  url: "https://exampleurl.com",
  method: 'POST',
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json',
  },
  // 仅序列化自定义的纯数据对象
  data: JSON.stringify(reqData)
})

如果调整后仍有问题，直接打印catch块中的err.response.data，GraphQL服务端会返回明确的错误原因（如查询字段不存在、语法错误等），可直接定位问题。

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