试图在GraphQL中添加课程的不良要求

Question

我正在研究一个类项目，在该项目中，我正在使用Apoll Server在后端使用Apoll Server创建一个Fullstack网站，并为前端做出反应。我试图允许用户注册，然后从其仪表板页面添加一门课程。目前，该课程只有Coursetitle，Description和Creator是用户ID。我能够从GraphQL操场上添加一门课程，但是当我从前端尝试它时，我会发现一个错误：

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

我已经浏览了所有代码，并将其与其他代码进行了比较，以签署有效的用户，但我无法获得Anotgher除了那个错误。我尝试将控制台.log放入解析器突变中，但一无所获，所以它根本不会击中分辨率。

这是我的添加解析器突变：

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>
        );
      }}
    />
  );
};