title: Error 400 when parsing variable to GraphQL query
body: <p>I have a basic react component that should render some dynamic data from my graphql db via react-apollo. I try to pass a content id to my query like so:</p>
  
  <pre><code>export default withApollo(graphql(
      gql`
              query ($postId: String!){
                  blogPost (where: { id: $postId }){
                      title
                  }
              }
      `,
      {
          options: {
              variables: {
                  postId: "cjju54kgfl4r6095353zn6us1"
  
              },
              props: ({data}) =&gt; ({data})
          }
      })(Post))
  </code></pre>
  
  <p>This example gives me a 400 error on the server</p>
  
  <p>However, it works like this:</p>
  
  <pre><code>export default withApollo(graphql(
      gql`
          query {
              blogPost (where: { id: "cjju54kgfl4r6095353zn6us1" }){
                  title
              }
          }
      `,
      {
          options: {
              props: ({data}) =&gt; ({data})
          }
      })(Post))
  </code></pre>
  
  <p>I went through the whole Apollo docs and just can't figure out what im doing wrong here.</p>
  
  <p>Here is the whole component in case that's helpful:</p>
  
  <pre><code>import PageLayout from '../layouts/main'
  import ContentWrapper from '../layouts/contentWrapper'
  import Header from '../components/Header'
  import {graphql} from 'react-apollo'
  import gql from "graphql-tag";
  import withApollo from "../lib/withApollo";
  import ErrorMessage from '../components/ErrorMessage'
  
  const headerContent = {
      headline: 'Test',
      subHeadline: 'Test'
  }
  
  function Post({data: {variables, loading, error, blogPost}}) {
      if (loading) {
          return &lt;div&gt;Loading&lt;/div&gt;
      }
      else if (error) {
          return &lt;ErrorMessage message='Error loading posts.'/&gt;
      }
      else {
          return (
              &lt;PageLayout&gt;
                  &lt;Header data={headerContent}/&gt;
                  &lt;ContentWrapper&gt;
                      &lt;h1&gt;{blogPost.title}&lt;/h1&gt;
                      &lt;p&gt;{JSON.stringify(variables)}&lt;/p&gt;
                  &lt;/ContentWrapper&gt;
              &lt;/PageLayout&gt;
          )
      }
  }
  
  export default withApollo(graphql(
      gql`
              query ($postId: String!){
                  blogPost (where: { id: $postId }){
                      title
                  }
              }
      `,
      {
          options: {
              variables: {
                  postId: "cjju54kgfl4r6095353zn6us1"
  
              },
              props: ({data}) =&gt; ({data})
          }
      })(Post))
  </code></pre>
  
  <p>I'm really stuck with this, thanks for helping out!</p>
  
  <p>Logging <code>data.error</code> throws:</p>
  
  <pre><code>Error: Network error: Response not successful: Received status code 400
      at new ApolloError (ApolloError.js:34)
      at ObservableQuery.webpackJsonp../node_modules/apollo-client/core/ObservableQuery.js.ObservableQuery.currentResult (ObservableQuery.js:87)
      at Query._this.getQueryResult (Query.js:104)
      at Query.webpackJsonp../node_modules/react-apollo/Query.js.Query.render (Query.js:206)
      at finishClassComponent (react-dom.development.js:13193)
      at updateClassComponent (react-dom.development.js:13155)
      at beginWork (react-dom.development.js:13824)
      at performUnitOfWork (react-dom.development.js:15863)
      at workLoop (react-dom.development.js:15902)
      at renderRoot (react-dom.development.js:15942)
  </code></pre>