尝试在 graphql 中添加课程的错误请求

Question

我正在做一个 class 项目，我正在使用 Apoll Server 创建一个全栈网站，后端使用 express，前端使用 React。我试图让用户注册，然后从他们的仪表板页面添加课程。现在课程只有 courseTitle、描述和创建者，这是用户的 ID。我可以从 graphql playground 添加课程，但是当我从前端尝试时，出现错误：

index.ts:58 Uncaught (in promise) Error: Response not successful: Received status code 400

我已经检查了所有代码，并将其与其他用于注册用户的代码进行了比较，这些代码有效，但除了该错误之外我无法得到其他信息。我尝试在解析器突变中放置一个 console.log 但什么也没得到，所以不知何故它根本没有击中解析器。

这是我的 addCourse 解析器突变：

export const CREATE_COURSE = gql`
  mutation addCourse(
    $courseTitle: String!
    $description: String!
    $creator: String!
  ) {
    addCourse(
      courseTitle: $courseTitle
      description: $description
      creator: $creator
    ) {
      _id
      courseTitle
      description
      creator {
        _id
        firstName
      }
    }
  }
`;

这是解析器突变：

addCourse: async (parent, args, context) => {
      //if (context.user) {
      const course = await Course.create(args);
      return course;
      //}
    },

这里是typeDef

const { gql } = require("apollo-server-express");
const typeDefs = gql`
  type User {
    _id: ID!
    email: String
    firstName: String
    lastName: String
    createdCourses: [Course]
    enrolledCourseIds: [ID]
    enrolledCourses: [Course]
  }

  type Course {
    _id: ID
    courseTitle: String!
    description: String!
    creator: User
  }

  type Mutation {
    addCourse(
      courseTitle: String!
      description: String!
      creator: String!
    ): Course
  }
`;
// export the typeDef
module.exports = typeDefs;

这是添加课程表格：

import { Form, Field } from "react-final-form";
import { useMutation } from "@apollo/client";
import { useNavigate } from "react-router-dom";
import { CREATE_COURSE } from "../utils/mutations";

export const CreateCourse = () => {
  const [addCourseMutation] = useMutation(CREATE_COURSE);
  const navigate = useNavigate();

  return (
    <Form
      onSubmit={async (values) => {
        await addCourseMutation({
          variables: {
            ...values,
          },
          onCompleted: (data) => {
            console.log(data);
            navigate("/dashboard");
          },
        });
      }}
      initialValues={{
        courseTitle: "",
        description: "",
      }}
      render={({ values, handleSubmit, form }) => {
        return (
          <div>
            <br />
            <br />
            <h1>Course Title</h1>
            <Field name="courseTitle" component="input" />
            <h1>Description</h1>
            <Field name="description" component="input" />
            
            
            <button
              disabled={
                values?.password?.length === 0 || values?.email?.length === 0
              }
              onClick={async () => {
                await handleSubmit();
                form.reset();
              }}
            >
              Submit
            </button>
          </div>
        );
      }}
    />
  );
};

我进行了一系列更改，试图获取创建者的用户 ID 并将其删除，因为我没有得到任何东西，但同样的错误现在对我所做的很重要。

Answer 1

我意识到我没有从表单提交的表单中发送用户 _id，所以我提取了用户 ID 并将其设置为初始状态，以便将其传递给解析器。也许不是最好的方法，但我成功了。

import jwt from "jwt-decode";
import Auth from "../utils/auth";
import { Form, Field } from "react-final-form";
import { useMutation } from "@apollo/client";
import { useNavigate } from "react-router-dom";
import { CREATE_COURSE } from "../utils/mutations";

export const CreateCourse = () => {
  const token = Auth.loggedIn() ? Auth.getToken() : null;
  const user = jwt(token);

  const [addCourseMutation] = useMutation(CREATE_COURSE);
  const navigate = useNavigate();

  return (
    <Form
      onSubmit={async (values) => {
        await addCourseMutation({
          variables: {
            ...values,
          },
          onCompleted: (data) => {
            console.log(data);
            navigate("/courses");
          },
        });
      }}
      initialValues={{
        courseTitle: "",
        description: "",
        creator: user.data._id,
      }}
      render={({ values, handleSubmit, form }) => {
        return (
          <div>
            <br />
            <br />
            <h1>Course Title</h1>
            <Field name="courseTitle" component="input" />
            <h1>Description</h1>
            <Field name="description" component="input" />

            <button
              onClick={async () => {
                await handleSubmit();
                form.reset();
              }}
            >
              Submit
            </button>
          </div>
        );
      }}
    />
  );
};

尝试在 graphql 中添加课程的错误请求

Bad request trying to add course in graphql

reactjs

mongodb

graphql

apollo-server