title: How to pass graphQL query variable into a decorated react component
body: <p>Does anyone know how what the proper way to add a query variable to apollo is from react? I can get the following code to work if I manually add the book name string instead of passing in the <code>$name</code> query variable, but as soon as I add it and try and pass the name variable in through an options in the propTypes, the <code>Invariant Violation: The operation 'data' wrapping 'BookPage' is expecting a variable: 'name' but it was not found in the props passed to 'Apollo(BookPage)'</code> </p>
  
  <p>I pulled the syntax for the decorator directly from the <a href="http://reactql.org" rel="nofollow noreferrer">reactQL</a> package so I know it has a little more syntactic sugar than other examples but it should still be valid for a query right?</p>
  
  <pre><code>const query = gql`
    query ($name: String!){
      bookByName(name: $name) {
        id
      }
  }
  `;
  
  @graphql(query)
  class BookPage extends React.PureComponent {
    static propTypes = {
      options: (props) =&gt; { return { variables: { name: "Quantum Mechanics"}}},
      data: mergeData({
        book:
          PropTypes.shape({
            id: PropTypes.string.isRequired,
          }),
      }),
    }
  
    render() {
      const { data } = this.props;
      if (data.loading) {
        return &lt;p&gt;Loading&lt;/p&gt;
      }
      const { bookByName } = data;
      const book = bookByName;
  
      return (
        &lt;p&gt;book.id&lt;/p&gt;
      );
    }
  }
  
  export default BookPage;
  </code></pre>