title: Error sending data back to apollo server by (bad request error)
body: <p>I am creating a project with React, Apollo and graphql. So far I've been successful enough to get the data back but I am not able to create (mutate) new data onto the server. Everytime I try. it gives me a 'Bad request' Error.
  I am attaching the react code and the resolver for the create post. Any help would be highly appreciated.</p>
  <p>React Code :</p>
  <pre><code>import React, { useState } from &quot;react&quot;;
  import { useMutation } from &quot;@apollo/client&quot;;
  
  import { CREATE_POST } from &quot;../graphql/Mutation&quot;;
  
  function WebForm(props) {
  const [username, setUsername] = useState(&quot;&quot;);
  const [title, setTitle] = useState(&quot;&quot;);
  const [description, setDescription] = useState(&quot;&quot;);
  
  const [createPost, { data }] = useMutation(CREATE_POST);
  
  const handleSubmit = (e) =&gt; {
  
  e.preventDefault();
  
    createPost({
    variables: { name: username, title: title, description: description },
  });
  };
  
  return (
  
  &lt;form onSubmit={handleSubmit} style={formStyle}&gt;
    &lt;label htmlFor=&quot;name&quot;&gt;Name&lt;/label&gt;
    &lt;input
      style={inputStyle}
      type=&quot;text&quot;
      value={username}
      onChange={(e) =&gt; setUsername(e.target.value)}
    /&gt;
    &lt;label htmlFor=&quot;title&quot;&gt;Title&lt;/label&gt;
    &lt;input
      style={inputStyle}
      type=&quot;text&quot;
      value={title}
      onChange={(e) =&gt; setTitle(e.target.value)}
    /&gt;
    &lt;label htmlFor=&quot;description&quot;&gt;Description&lt;/label&gt;
    &lt;input
      style={inputStyle}
      type=&quot;text&quot;
      value={description}
      onChange={(e) =&gt; setDescription(e.target.value)}
    /&gt;
    &lt;button type=&quot;submit&quot; style={buttonStyle}&gt;
      Create Post
    &lt;/button&gt;
  &lt;/form&gt;
  )
  }
  
  const buttonStyle = {
    marginTop: 10,
    padding: &quot;5px 25px 5px 25px&quot;,
    background: &quot;#aef359&quot;,
    outline: &quot;none&quot;,
    border: &quot;none&quot;,
    color: &quot;black&quot;,
    borderRadius: 5,
  };
  
  const formStyle = {
    display: &quot;flex&quot;,
    flexDirection: &quot;column&quot;,
    alignItems: &quot;center&quot;,
    width: &quot;100%&quot;,
    justifyContent: &quot;center&quot;,
    marginTop: 15,
  };
  
  const inputStyle = { borderRadius: 4 };
  
  export default WebForm;
  </code></pre>
  <p>Resolver Code for CreatePost Mutation:</p>
  <pre><code>async createPost(_, { name, title, description }, context) {
        const newPost = new Post({
          name,
          title,
          description,
        });
  
        try {
          const post = await newPost.save();
        } catch (err) {
          throw new Error(&quot;Failed to create post&quot;, err);
        }
  
        return post;
      },
  </code></pre>
  <p>Also the mutation query in front-end</p>
  <pre><code>const CREATE_POST = gql`
    mutation CreatePost($name: String!, $title: String!, $description: String!) {
      createPost(name: $name, title: $title, description: $description) {
        id
        Name
        title
        description
      }
    }
  `;
  </code></pre>