Bad request trying to add course in graphql - reactjs

Question

I am working on a class project where I am creating a fullstack website using Apoll Server with express on the back end and React for the front end. I am trying to allow users to sign up and then from their dashboard page add a course. Right now the course just have courseTitle, description, and creator which is the user's id. I am able to add a course from the graphql playground but when I try it from the front end I get an error:
index.ts:58 Uncaught (in promise) Error: Response not successful: Received status code 400
I have gone over all the code and compared it to other code for signing up a user which works but I cannot get anotgher other than that error. I tried putting a console.log in resolver mutation but get nothing so somehow it isn't hitting the resolver at all.
Here is my addCourse resolver mutation:
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
}
}
}
`;
Here is the resolver mutation:
addCourse: async (parent, args, context) => {
//if (context.user) {
const course = await Course.create(args);
return course;
//}
},
Here is the 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;
This is the add course form:
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>
);
}}
/>
);
};
I made a bunch of changes trying to get the user Id for creator and took them out since I wasn't geting anything but that same error now matter what I did.

Answer 1

I realized that I wasn't sending the user _id from the form the form submission so I gut the user Id and set it in the initial state so it was passed to the resolver. Maybe not be the best way to do it, but I got it working.
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>
);
}}
/>
);
};