将数据发送回阿波罗服务器时出错（错误请求错误）

Posted 2023-03-08

【中文标题】将数据发送回阿波罗服务器时出错（错误请求错误）

【英文标题】：Error sending data back to apollo server by (bad request error)

【发布时间】：2021-09-09 11:40:39

【问题描述】：

我正在使用 React、Apollo 和 graphql 创建一个项目。到目前为止，我已经成功地取回了数据，但我无法在服务器上创建（变异）新数据。每次我尝试。它给了我一个“错误的请求”错误。 我附上了创建帖子的反应代码和解析器。任何帮助将不胜感激。

反应代码：

import React,  useState  from "react";
import  useMutation  from "@apollo/client";

import  CREATE_POST  from "../graphql/Mutation";

function WebForm(props) 
const [username, setUsername] = useState("");
const [title, setTitle] = useState("");
const [description, setDescription] = useState("");

const [createPost,  data ] = useMutation(CREATE_POST);

const handleSubmit = (e) => 

e.preventDefault();

  createPost(
  variables:  name: username, title: title, description: description ,
);
;

return (

<form onSubmit=handleSubmit style=formStyle>
  <label htmlFor="name">Name</label>
  <input
    style=inputStyle
    type="text"
    value=username
    onChange=(e) => setUsername(e.target.value)
  />
  <label htmlFor="title">Title</label>
  <input
    style=inputStyle
    type="text"
    value=title
    onChange=(e) => setTitle(e.target.value)
  />
  <label htmlFor="description">Description</label>
  <input
    style=inputStyle
    type="text"
    value=description
    onChange=(e) => setDescription(e.target.value)
  />
  <button type="submit" style=buttonStyle>
    Create Post
  </button>
</form>
)


const buttonStyle = 
  marginTop: 10,
  padding: "5px 25px 5px 25px",
  background: "#aef359",
  outline: "none",
  border: "none",
  color: "black",
  borderRadius: 5,
;

const formStyle = 
  display: "flex",
  flexDirection: "column",
  alignItems: "center",
  width: "100%",
  justifyContent: "center",
  marginTop: 15,
;

const inputStyle =  borderRadius: 4 ;

export default WebForm;

CreatePost 变异的解析器代码：

async createPost(_,  name, title, description , context) 
      const newPost = new Post(
        name,
        title,
        description,
      );

      try 
        const post = await newPost.save();
       catch (err) 
        throw new Error("Failed to create post", err);
      

      return post;
    ,

也是前端的变异查询

const CREATE_POST = gql`
  mutation CreatePost($name: String!, $title: String!, $description: String!) 
    createPost(name: $name, title: $title, description: $description) 
      id
      Name
      title
      description
    
  
`;

【参考方案1】：

您似乎正在查询 Name 字段，而不是 CREATE_POST 突变中的 name。我假设您的 createPost 解析器中的 post 是一个看起来像这样的对象：

  id
  name
  title
  description

字段名称区分大小写。将来进行调试时，您可以检查 Chrome 开发工具中的网络选项卡并查找特定的 graphql 请求，该请求应以红色突出显示。然后，您可以查看响应并提取特定的 GraphQLError 消息。这些消息的描述性通常足以知道出了什么问题，而不是通用的Bad request 错误消息。根据我的经验，它通常能够捕捉到像这样的简单拼写错误并建议正确的字段名称。