title: Variables value not passed to GraphQL Mutation (React)
body: <p>I have been stuck on this bug for now a while, so any help would be much appreciated!! :) </p>
  
  <p>I am building a web app with:</p>
  
  <ul>
  <li>Backend server running with Spring Boot</li>
  <li>Frontend server running with React/TypeScript/GraphQL</li>
  </ul>
  
  <p>So far I have managed to make the Backend work &amp; tested it with Insomnia (the equivalent of Postman..)
  I have also been able to test the frontend with simple queries without variables - so far so good...</p>
  
  <p>I am now trying to pass variables value to a mutation (frontend side) but I get the following error:
  Although, the mutation works fine if I hard code the values and remove the $ variables.</p>
  
  <blockquote>
    <p>Variable 'input' has coerced Null value for NonNull type 'PostInput!'</p>
  </blockquote>
  
  <p>If I run the mutation with the Apollo Chrome extension, I get the following error (different):</p>
  
  <blockquote>
    <p>{
      "errors": [
        {
          "message": "Unexpected token V in JSON at position 0",
          "locations": [
            "ServerParseError: Unexpected token V in JSON at position 0\n    at JSON.parse ()\n    at <a href="http://localhost:3000/static/js/0.chunk.js:45120:21" rel="nofollow noreferrer">http://localhost:3000/static/js/0.chunk.js:45120:21</a>"
          ]
        }
      ]
    }</p>
  </blockquote>
  
  <p>Hope some code will help:</p>
  
  <p><strong>Mutation</strong></p>
  
  <pre><code>import gql from "graphql-tag";
  
  export const MUTATE_POST = gql`
    mutation MutatePost($input: PostInput!) {
      mutatePost(post: $input) {
        id
        title
        description
      }
    }
  `;
  </code></pre>
  
  <p><strong>Apollo Client</strong></p>
  
  <pre><code>import ApolloClient from "apollo-boost";
  
  const URI_DEV = "http://localhost:9090/posts";
  
  export const client = new ApolloClient({
    uri: URI_DEV
  });
  </code></pre>
  
  <p><strong>Root App index.tsx</strong></p>
  
  <pre><code>import { ApolloProvider } from "@apollo/react-hooks";
  
  function App() {
    return (
      &lt;ApolloProvider client={client}&gt;
        &lt;Home /&gt;
      &lt;/ApolloProvider&gt;
    );
  }
  
  render(&lt;App /&gt;, document.getElementById("root"));
  </code></pre>
  
  <p><strong>In React Component</strong></p>
  
  <pre><code>import { useMutation } from "@apollo/react-hooks";
  
   const [mutatePost] = useMutation(MUTATE_POST);
  
    const onClickSubmit = () =&gt; {
      mutatePost({ variables: { input: { title: "...", description: "..."} } })
        .then(() =&gt; {
          onClose();
        })
        .catch(error =&gt; {
          console.error(error);
        });
    };
  </code></pre>
  
  <p><strong>GraphQL schema (Backend side)</strong></p>
  
  <pre><code>schema {
      query: Query
      mutation: Mutation
  }
  
  input PostInput {
      id: String
      title: String!
      description: String!
  }
  
  type Post {
      id: ID!
      title: String!
      description: String!
  }
  
  type Query {
      getAllPosts: [Post]!
  }
  
  type Mutation {
      mutatePost(post: PostInput!) : Post
      deletePostsByIds(ids: [ID]!) : [Post]
  }
  
  </code></pre>
  
  <p>Am I missing anything / any typo anywhere? I am still new to this, unfortunately...</p>
  
  <p>Thank you in advance for your help !!!!!!</p>