createHttpLink引发GraphQL 400错误，书籍无法存储求助

问题概述 #

• 在GraphQL Playground中执行saveBook mutation可正常完成，书籍能存入数据库
• 应用中调用该mutation时返回400错误，用户信息可正常存储，但书籍无法保存
• 已提供Apollo Client配置、相关Mutations及Query代码

可能的原因及排查步骤 #

1. SaveBookInput参数缺失必填字段或字段不匹配 #

后端定义的SaveBookInput类型可能包含必填字段（如bookId、title），但前端调用时传入的input对象缺少这些字段，或字段名称与后端定义不一致。

排查：

• 找到前端调用SAVE_BOOK mutation的代码（如搜索页的保存按钮逻辑），确认传入的input结构是否完整：

  // 示例调用逻辑，需对照实际代码检查
  const handleSave = (selectedBook) => {
    saveBook({
      variables: {
        input: {
          bookId: selectedBook.bookId, // 确认字段名与后端一致
          title: selectedBook.title,
          authors: selectedBook.authors,
          description: selectedBook.description,
          image: selectedBook.image,
          link: selectedBook.link
        }
      }
    });
  };
  

• 查看后端SaveBookInput的定义，确保前端传入的字段完全覆盖必填项，无拼写错误（如bookId写成id，authors写成author）。

2. Authorization头未正确携带或token无效 #

虽然用户信息能正常存储，但saveBook mutation可能需要有效的身份验证，前端请求未正确携带token或token已过期。

排查：

• 打开浏览器开发者工具→Network标签，找到saveBook的POST请求：
  • 检查Request Headers中的Authorization是否为Bearer <有效token>，确认token与登录时获取的一致
  • 若token缺失，检查authLink中localStorage.getItem("id_token")的key是否与登录时存储的key匹配（登录逻辑中是否将token存入了id_token字段）
• 将localStorage中的id_token复制到GraphQL Playground的Headers中，执行saveBook mutation，验证token是否有效：

  {
    "Authorization": "Bearer <你的token>"
  }
  

3. Mutation参数的非空约束不匹配 #

前端定义的SAVE_BOOK mutation中，$input: SaveBookInput未添加非空约束（!），但后端saveBook resolver可能要求input不能为空。若前端传入了null或空对象，会触发400错误。

排查：

• 修改前端mutation定义，为$input添加非空约束：

  export const SAVE_BOOK = gql`
    mutation saveBook($input: SaveBookInput!) {
      saveBook(input: $input) {
        username
        _id
        bookCount
        savedBooks {
          bookId
          authors
          title
          image
          link
          description
        }
      }
    }
  `;
  

• 确保前端调用时input始终为有效对象，而非null或undefined。

4. 查看GraphQL错误详情 #

400错误的响应体中通常包含具体的GraphQL错误信息，可直接定位问题：

• 在Network标签中查看saveBook请求的Response，找到errors字段，示例如下：

  {
    "errors": [
      {
        "message": "Field 'bookId' of type 'String!' must not be null",
        "locations": [{"line": 2, "column": 3}]
      }
    ]
  }
  

根据错误信息直接修复对应问题即可。

总结 #

优先通过浏览器Network工具查看请求的参数、头信息及响应错误，这是最快定位400问题的方式。常见原因包括参数缺失、token无效或字段不匹配，对照后端定义逐一排查即可解决。

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