title: Error trying to save a record with server created in react, graphql and apollo
body: <p>When i try to send a register from my UI to mi SERVER, that send me this message </p>
  
  <blockquote>
    <p>POST <a href="http://localhost:4000/graphql" rel="nofollow noreferrer">http://localhost:4000/graphql</a> 400 (Bad Request) index.js:70
    [GraphQL error]: Message: Variable "$description" of required type
    "String!" was not provided., Location: [object Object], Path:
    undefined index.js:75 [Network error]: ServerError: Response not
    successful: Received status code</p>
  </blockquote>
  
  <p>This is my class component </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { Component, Fragment } from 'react';
  import { Query, Mutation } from 'react-apollo';
  import BrandItem from '../models/BrandItem';
  import * as BrandService from '../services/BrandService';
  
  export class Brand extends Component {
    render() {
      let input;
  
      return (
        &lt;div className="divform"&gt;
          &lt;Mutation mutation={BrandService.ADD_BRAND}&gt;
            {
              (addBrand, { data }) =&gt; (
                &lt;form onSubmit={e =&gt; {
                  e.preventDefault();
                  addBrand({ variables: { type: input.value } });
                  input.value = '';
                }}&gt;
                  &lt;label htmlFor="description"&gt;Description&lt;/label&gt;
                  &lt;input type="text" id="description" name="description" required ref={node =&gt; { input = node; }} /&gt;
                  &lt;input type="submit" value="Send" /&gt;
                &lt;/form&gt;
              )
            }
  
          &lt;/Mutation&gt;
          &lt;div&gt;
            &lt;Fragment&gt;
  
              &lt;Query query={BrandService.BRAND_QUERY}&gt;
                {
                  ({ loading, error, data }) =&gt; {
                    if (loading) return &lt;div&gt;&lt;h4&gt;loading....&lt;/h4&gt;&lt;/div&gt;
                    if (error) console.log(error);
  
                    return &lt;Fragment&gt;
                      &lt;table&gt;
                        &lt;thead&gt;
                          &lt;tr&gt;
                            &lt;th&gt;Id&lt;/th&gt;
                            &lt;th&gt;Description&lt;/th&gt;
                          &lt;/tr&gt;
                        &lt;/thead&gt;
                        &lt;tbody&gt;
                          {
                            data.brands.map(brand =&gt; (
                              &lt;BrandItem key={brand.id} brand={brand} /&gt;
                            ))
                          }
                        &lt;/tbody&gt;
                      &lt;/table&gt;
                    &lt;/Fragment&gt;
                  }
                }
              &lt;/Query&gt;
            &lt;/Fragment&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      )
    }
  }
  
  export default Brand</code></pre>
  </div>
  </div>
  </p>
  
  <p>And this is my service</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import gql from 'graphql-tag';
  
  export const BRAND_QUERY = gql`
    query BrandQuery {
      brands {
        id
        description
      }
    }
  `;
  
  export const ADD_BRAND = gql`
    mutation AddBrand($description: String!){
      addBrand(description: $description){
        id
      }
    }
  `;</code></pre>
  </div>
  </div>
  </p>