通过（错误的请求错误）将数据发送回 apollo 服务器时出错

Question

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

反应代码：

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
    }
  }
`;

Answer 1

您似乎在查询 Name 字段而不是 CREATE_POST 突变中的 name。我假设您的 createPost 解析器中的 post 是一个如下所示的对象：

{
  id
  name
  title
  description
}

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

通过（错误的请求错误）将数据发送回 apollo 服务器时出错

Error sending data back to apollo server by (bad request error)

reactjs

graphql

apollo-server

react-apollo

apollo-client