错误：响应不成功：收到状态码 400

Question

应用程序在前端使用 apollo 服务器和 react。在后端我使用 apollo 服务器。该请求通过 Playground 和 Postman 工作，我没有收到任何错误。 没有 参数的前端查询也工作完美。当我在前端进行 mutation 时，我收到以下错误错误：Response not successful: Received status code 400。在后端打印调试时，我也没有得到任何参数。在 Web 控制台中：XHR POST http://localhost:4000/ 包含以下请求： {"variables":{},"query":"mutation ($title: String!, $dotColor: String!) { \n newStack(title: $title, dotColor: $dotColor) {\n stackID\n title\n dotColor\n __typename\n }\n}\n"}

src/queries/queries.js

import { gql } from "@apollo/client";

[...]

const newStackMutation = gql`
  mutation($title: String!, $dotColor: String!) {
    newStack(title: $title, dotColor: $dotColor) {
      stackID
      title
      dotColor
    }
  }
`;

[...]

export {[...], newStackMutation};

src/components/NewStack.js

import { useMutation } from "@apollo/client";
import { newStackMutation } from "../queries/queries";
import { useState } from "react";

export default function NewStack() {
  const [newStack] = useMutation(newStackMutation);
  const handleNewStackSubmit = (e) => {
    //newStack({variables}); actually I would pass the variables from the setState here
    newStack({ title: "Test", dotColor: "red" });
  };
  return (
    <div>
      <form onSubmit={handleNewStackSubmit}>
      [...]
          <button type="submit" />
        </div>
      </form>
    </div>
  );
};

Answer 1

啊，你知道它可能是因为你需要添加突变的名称

const newStackMutation = gql`
  mutation newStack($title: String!, $dotColor: String!) {
    newStack(title: $title, dotColor: $dotColor) {
      stackID
      title
      dotColor
    }
  }
`;// Notice the `newStack` next to `mutation`, that should work

还有这个

newStack({variables: { title: "Test", dotColor: "red" }});