title: Uncaught (in promise) Error: Network error: Unexpected token < in JSON at position 3
body: <p>i'm just learning react apollo. I found this error difficult to debug. Ofcourse, i have search multiple blog post, Q&amp;A sites and try few of them. No one work. Actually, i want to pass a value to a parameter in GraphQL method Mutation (which its value is an object). Here is my source code </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-html lang-html prettyprint-override"><code>const client = new ApolloClient({
    uri: "www.example.com"
  });
  
  const ADD_PARTNER = gql`
      mutation LE($input: inputPartner!) { 
          le_addpartner(input: $input) {
              result {
                  code
                  message
                  success
              }
              partnerID
          }
      }
  `;
  
  class AddTodo extends React.Component {
      state = {
          name: '',
          nameSlug: '',
          bankLogo: null,
          phoneNumber: '',
          companyProfile: '',
          metaDescription: '',
          metaTitle: '',
          formSchema: ''
      }
  
      handleValueChange = (e) =&gt; {
          this.setState({
              [e.target.id]: e.target.value
          })
      }
  
      render () {
          return (
              &lt;Mutation mutation={ADD_PARTNER}&gt;
                  {(le_addpartner, { data }) =&gt; (
                      &lt;form
                          onSubmit={e =&gt; {
                              e.preventDefault();
                              le_addpartner({ 
                                  variables: { 
                                          input: {...this.state}
                                  } 
                              })
                          }}
                      &gt;
                          &lt;div className="form-group"&gt;
                              &lt;label htmlFor="name"&gt;Name&lt;/label&gt;
                              &lt;input type="text" className="form-control" id="name" onChange={(e) =&gt; this.handleValueChange(e)} /&gt;
                          &lt;/div&gt;
                          &lt;div className="form-group"&gt;
                              &lt;label htmlFor="nameSlug"&gt;Name Slug&lt;/label&gt;
                              &lt;input type="text" className="form-control" id="nameSlug" onChange={(e) =&gt; this.handleValueChange(e)} /&gt;
                          &lt;/div&gt;
                          &lt;div className="form-group"&gt;
                              &lt;label htmlFor="bankLogo"&gt;Bank Logo&lt;/label&gt;
                              &lt;input type="text" className="form-control" id="bankLogo" onChange={(e) =&gt; this.handleValueChange(e)} /&gt;
                          &lt;/div&gt;
                          &lt;div className="form-group"&gt;
                              &lt;label htmlFor="phoneNumber"&gt;Phone Number&lt;/label&gt;
                              &lt;input type="text" className="form-control" id="phoneNumber" onChange={(e) =&gt; this.handleValueChange(e)} /&gt;
                          &lt;/div&gt;
                          &lt;div className="form-group"&gt;
                              &lt;label htmlFor="companyProfile"&gt;Company Profile&lt;/label&gt;
                              &lt;textarea className="form-control" id="companyProfile" rows="3" onChange={(e) =&gt; this.handleValueChange(e)}&gt;&lt;/textarea&gt;
                          &lt;/div&gt;
                          &lt;div className="form-group"&gt;
                              &lt;label htmlFor="metaDescription"&gt;Meta Description&lt;/label&gt;
                              &lt;textarea className="form-control" id="metaDescription" rows="3" onChange={(e) =&gt; this.handleValueChange(e)}&gt;&lt;/textarea&gt;
                          &lt;/div&gt;
                          &lt;div className="form-group"&gt;
                              &lt;label htmlFor="metaTitle"&gt;Meta Title&lt;/label&gt;
                              &lt;textarea className="form-control" id="metaTitle" rows="3" onChange={(e) =&gt; this.handleValueChange(e)}&gt;&lt;/textarea&gt;
                          &lt;/div&gt;
                          &lt;div className="form-group"&gt;
                              &lt;label htmlFor="formSchema"&gt;Form Schema&lt;/label&gt;
                              &lt;textarea className="form-control" id="formSchema" rows="4" onChange={(e) =&gt; this.handleValueChange(e)}&gt;&lt;/textarea&gt;
                          &lt;/div&gt;
                          &lt;button type="submit" className="btn btn-primary"&gt;Add Partner&lt;/button&gt;
                      &lt;/form&gt;
                  )}
              &lt;/Mutation&gt;
          )
      }
  }
  
  const App = () =&gt; (
    &lt;ApolloProvider client={client}&gt;
      &lt;div style={{ marginTop: '50px' }}&gt;
        &lt;h2&gt;
            GraphQL Mutation Partner{' '}
            &lt;span aria-labelledby='jsx-a11y/accessible-emoji' role='img'&gt;&lt;/span&gt;
        &lt;/h2&gt;
        &lt;AddTodo /&gt;
      &lt;/div&gt;
    &lt;/ApolloProvider&gt;
  );</code></pre>
  </div>
  </div>
  </p>
  
  <p>The error i got when submitted the form is </p>
  
  <blockquote>
    <p>[Network error]: SyntaxError: Unexpected token &lt; in JSON at position 3
    ApolloError.js:37 Uncaught (in promise) Error: Network error:
    Unexpected token &lt; in JSON at position 3
        at new ApolloError (ApolloError.js:37)
        at Object.error (QueryManager.js:212)
        at notifySubscription (Observable.js:130)
        at onNotify (Observable.js:161)
        at SubscriptionObserver.error (Observable.js:220)
        at Object.error (index.js:55)
        at notifySubscription (Observable.js:130)
        at onNotify (Observable.js:161)
        at SubscriptionObserver.error (Observable.js:220)
        at httpLink.js:134</p>
  </blockquote>
  
  <p>Any help would be appreciated :D </p>