title: Unhandled Rejection (Error): Response not successful: Received status code 400 new ApolloError
body: <p>I'm kind new to <code>Apollo Client</code>. Let's talk less and show the code. I have a server that is running and I'm trying to make a mutation using react.</p>
  <p>mutation in the <code>server.js</code></p>
  <pre class="lang-js prettyprint-override"><code>const RootMutationType = new GraphQLObjectType({
    name: &quot;RootMutation&quot;,
    description: &quot;Root Mutation Type.&quot;,
    fields: () =&gt; ({
      addBook: {
        type: BookType,
        args: {
          authorId: { type: GraphQLID },
          name: { type: GraphQLString },
        },
        resolve: async (parent, args) =&gt; {
          const book = new Book({
            name: args.name,
            authorId: args.authorId,
          });
          return await book.save();
        },
      },
  ......
  // other crazy stuff here 
  </code></pre>
  <p>Using <code>graphiql</code> Im able to add a book which means the server is running fine. But on the react client when i try to add a book i get the error. Here is what i have.</p>
  <p>mutations.js</p>
  <pre class="lang-js prettyprint-override"><code>import { gql } from &quot;@apollo/client&quot;;
  
  const ADD_BOOK_MUTATION = gql`
    mutation addBook($authorId: Integer!, $name: String!) {
      addBook(authorId: $authorId, name: $name) {
        name
        id
      }
    }
  `;
  
  export { ADD_BOOK_MUTATION };
  </code></pre>
  <p>Form.jsx</p>
  <pre><code>import React, { useEffect, useRef } from &quot;react&quot;;
  import { useMutation } from &quot;@apollo/client&quot;;
  import { ADD_BOOK_MUTATION } from &quot;./mutations&quot;;
  const Index = () =&gt; {
    const [addBook, { data, error }] = useMutation(ADD_BOOK_MUTATION);
    const idRef = useRef(null);
    const nameRef = useRef(null);
    useEffect(() =&gt; {
      if (error) {
        console.error(error);
      } else {
        console.log(data);
      }
    }, [data, error]);
    const addBookHandler = (e) =&gt; {
      e.preventDefault();
      addBook({
        variables: {
          authorId: idRef.current.value,
          name: nameRef.current.value,
        },
      });
    };
    return (
      &lt;form className=&quot;form&quot;&gt;
        &lt;input ref={idRef} type=&quot;number&quot; placeholder=&quot;author id&quot; /&gt;
        &lt;input ref={nameRef} type=&quot;text&quot; placeholder=&quot;book name&quot; /&gt;
        &lt;button onClick={addBookHandler}&gt;addBook&lt;/button&gt;
      &lt;/form&gt;
    );
  };
  export default Index;
  </code></pre>
  <p>Can someone tell me where am i wrong here!! An help input will be appreciated folks!!</p>