GraphQL + ReactJS throws Error 400: Bad Request

Question

I've been stuck at trying to submit my form for a couple of days now. I constantly get hit with the following error: "POST http://localhost:5000/graphql 400 (Bad Request)".

I believe the problem lies somewhere within the mutation/query itself and not the headers since the request is sent in the correct content type (application/json) as you can see in the screenshot.

My code (warning, I'm an absolute beginner) is the following:

// @flow
import React, { useState } from 'react';
import { Row, Col, Card, OverlayTrigger, Tooltip } from 'react-bootstrap';
import { FormInput } from '../../../../components';




type ChecklistsItems = {
    id: number,
    title: string,
    completed: boolean,
};

type AttachmentsItems = {
    id: number,
    filename: string,
    size: string,
};

type CommentsItems = {
    id: number,
    author: string,
    text: string,
    posted_on: string,
    author_avatar: string,
};

type TaskProps = {
    id: number,
    title: string,
    assigned_to: string,
    assignee_avatar: string,
    due_date: string,
    completed: boolean,
    priority: string,
    stage: string,
    checklists: Array<ChecklistsItems>,
    description: string,
    attachments: Array<AttachmentsItems>,
    comments: Array<CommentsItems>,
};

const createMarkup = (text) => {
    return { __html: text };
};

const Task = (task: TaskProps): React$Element<React$FragmentType> => {
    const [completed, setCompleted] = useState(task.completed == true);
    const [enteredTitle, setEnteredTitle] = useState('');
    const [enteredPriority, setEnteredPriority] = useState('');
    const [enteredDescription, setEnteredDescription] = useState('');
    const [enteredDeadline, setEnteredDeadline] = useState('');
    const [enteredStartTime ,setEnteredStartTime] = useState('');
    const [enteredEndTime, setEnteredEndTime] = useState('');
    const [enteredColor, setEnteredColor] = useState('');


    

    /*
     * mark completd on selected task
     */
    const markCompleted = (e) => setCompleted(e.target.checked);

    const titleChangeHandler = (event) => {
        setEnteredTitle(event.target.value);

    };

    const  priorityChangeHandler = (event) => {
        setEnteredPriority(event.target.value);
    };

    const descriptionChangeHandler = (event) => {
        setEnteredDescription(event.target.value)
    };

    const deadlineChangeHandler = (event) => {
        setEnteredDeadline(event.target.value)
    }

    const startTimeChangeHandler = (event) => {
        setEnteredStartTime(event.target.value);
    }

    const endTimeChangeHandler = (event) => {
        setEnteredEndTime(event.target.value);
    }

    const colorChangeHandler = (event) => {
        setEnteredColor(event.target.value);
    }

    const submitHandler = (event) => {
        event.preventDefault();
     
     
        const taskData = {
            title: enteredTitle,
            priority: enteredPriority,
            description: enteredDescription,
            due_date: new Date(enteredDeadline),
            start: new Date(enteredStartTime),
            end: new Date(enteredEndTime),
            color: enteredColor,
        };

        console.log(taskData);
        setEnteredTitle('');
        setEnteredPriority('');
        setEnteredDescription('');
        setEnteredDeadline('');
        setEnteredStartTime('');
        setEnteredEndTime('');
        setEnteredColor('#');
    

        const requestBody = {
            query: `
                mutation {
                    createTask(taskInput: {title: "${enteredTitle}", description: "${enteredPriority}", priority: "${enteredDescription}", due_date: "${enteredDeadline}", start: "${enteredStartTime}", end: "${enteredEndTime}", color: "${enteredColor}"} ) {
                        _id
                        title
                        description
                        priority
                        due_date
                        start
                        end
                        color
                        creator {
                            id
                            email
                        }
                    }
                }
            `
    };

    fetch('http://localhost:5000/graphql', {
        method: 'POST',
        body: JSON.stringify(requestBody),  
        headers: {
            'Content-Type': 'application/json'
        }
      })
        .then(res => {
          if (res.status !== 200 && res.status !== 201) {
            throw new Error('Failed!');
          }
          return res.json();
        })
        .then(resData => {
          this.fetchTasks();
        })
        .catch(err => {
          console.log(err);
        });
    
};

    return (
        <React.Fragment>
            <div style={{marginTop:'118px'}} />
            <Card >
                <Card.Body>
                   <h3>Add Task</h3>
                   <p style={{opacity: "70%"}}>You can add items in the form below. These tasks will automatically be added to your task list and your calendar.</p>
                    <hr className="mt-4 mb-2" />

                    <Col>
                    <Row className="mt-2">
                    <form className="p-2" onSubmit={submitHandler}>

<Row>
    <OverlayTrigger
        placement="top"
        overlay={<Tooltip>Enter a title/name for your task.</Tooltip>}>
    <Col md={8}>
        <FormInput
            name="title"
            label="Title"
            placeholder="Enter title"
            type="text"
            containerClass="mb-3"
            className="form-control form-control-light"
            key="title"
            value={enteredTitle}
            onChange={titleChangeHandler}
        />
    </Col>
    </OverlayTrigger>
    <OverlayTrigger
        placement="top"
        overlay={<Tooltip>Set a priority status to your task.</Tooltip>}>
    <Col md={4}>
        <FormInput
            name="priority"
            label="Priority"
            type="select"
            containerClass="mb-3"
            className="form-select form-control-light"
            key="priority"
            value={enteredPriority}
            onChange={priorityChangeHandler}
            >
            <option>Select</option>
            <option>Low</option>
            <option>Medium</option>
            <option>High</option>
        </FormInput>
    </Col>
    </OverlayTrigger>
</Row>
<OverlayTrigger
        placement="top"
        overlay={<Tooltip>Enter a description to explain details about the task.</Tooltip>}>
<Col>
<FormInput
    name="description"
    label="Description"
    type="textarea"
    containerClass="mb-3"
    className="form-control form-control-light"
    rows="3"
    key="description"
    value={enteredDescription}
    onChange={descriptionChangeHandler}
/>
</Col>
</OverlayTrigger>

        <OverlayTrigger
         placement="top"
         overlay={<Tooltip>Enter the date when the task has to be finished.</Tooltip>}>
         <div className="form-group">
             <FormInput
             name="dueDate"
             label="Due Date"
             type="date"
             value={enteredDeadline}
             onChange={deadlineChangeHandler}>     
             </FormInput>
           </div>
        </OverlayTrigger>

<br />
<Row>
    <OverlayTrigger
         placement="top"
         overlay={<Tooltip>Set a start time for your task. The task will be listed in your personal calendar accordingly.</Tooltip>}>
    <Col md={6}>
        <div className="form-group">
            <label className="form-label">Start time</label> <br />

            <FormInput 
            type="datetime-local"
            value={enteredStartTime}
            onChange={startTimeChangeHandler}
            />

        </div>
    </Col>
    </OverlayTrigger>

    <OverlayTrigger
         placement="top"
         overlay={<Tooltip>Set an end time for your task. The task will be listed in your personal calendar accordingly.</Tooltip>}>
    <Col md={6}>
        <div className="form-group">
            <label className="form-label">End time</label> <br />

            <FormInput 
            type="datetime-local"
            value={enteredEndTime}
            onChange={endTimeChangeHandler}
            />
            
        </div>
    </Col>
    </OverlayTrigger>

</Row>    
<br />                    
<Row>
<OverlayTrigger
         placement="top"
         overlay={<Tooltip>Set the color with which you want your task to appear in the calendar.</Tooltip>}>
    <Col md={6}>
        <div className="form-group">
            <label className="form-label">Color</label> <br />
            <FormInput 
            type="color"
            // value={enteredColor}
            onChange={colorChangeHandler}
            >

            </FormInput>
            {/* <CirclePicker /> */}
        </div>
    </Col>
    </OverlayTrigger>

</Row>
    
<Col>
                         <button style={{marginTop: '50px', marginLeft: "23%", width: "300px"}} type="submit" className="btn btn-sm btn-success">
                                                        <i className="uil uil-message me-1"></i>Add Task
                         </button>
                    </Col>

</form>
                    </Row>
                    </Col>
                    
                </Card.Body>
            </Card>
        </React.Fragment>
    );
};


export default Task;

Right now, I can submit and log the formdata to my console in the form of an object so I know the technique behind it works. However, I just can't seem to manage inserting it into my actual database.

If someone is able to help me out it would be wildly appreciated!

Kind regards,

Abbeneji

Answer 1

On the submitHandler, I can see that you have created a const taskData for managing your inputs, well!. you logged taskData on console seems fine on console as well, and again you set them empty and reusing that UseState const on request body, may they already set empty there. Also look at the payload data(Next after Headers tab) and compare it with the api request flow, which may helpful for you to debugging. There may be a chance of request payload formed incorrectly.