title: HowTo: Increment the value of an integer based field in GraphQL
body: <p>So, I wish to create a GraphQL mutation, in GraphCool, that increments the existing value of an integer field by a predetermined amount, passed in as a variable. For example:</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>mutation updateLikes ($id: ID!, $count: Int) {
    updatePosts (id: $id, likes: incrementBy $count) {
      id
      likes
    }
  }
  
  Query variable
  
  {
    "id" : "cj0qkl04vep8k0177tky596og",
    "count": 1
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>How do I do this?</p>
  
  <p>Also, I am attempting to trigger the above mentioned process from a onClick event, but am getting an 'cannot read property 'props' of null' error message, I suspect on this.props.client.query:</p>
  
  <p>Photo.js</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>import React from 'react';
  import Comments from './Comments';
  import CSSTransitionGroup from 'react-addons-css-transition-group';
  import { Link } from 'react-router';
  import {
    gql,
    graphql,
    withApollo
  } from 'react-apollo';
  import ApolloClient from 'apollo-client';
  
  class Photo extends React.Component {
  
    incrementQuery(currentID) {
      console.log("like of id=" + currentID+ " has been incremented by 1");
  
      this.props.client.query({
        query: gql`
          mutation updatePosts($id: ID!) {
            updatePosts (id: $id, likes: 1) {
              id
              likes
            }
          }  
        `,
        variables: {
          id: currentID,
        },
      });
    }
  
    render() {
      const { post, i } = this.props;
  
      return (
        &lt;figure key={i} className="grid-figure"&gt;
  
          &lt;div className='grid-photo-wrap'&gt;
            &lt;Link to={`/view/${post.id}`}&gt;
              &lt;img className='grid-photo' src={post.displaysrc} alt={post.caption} /&gt;
            &lt;/Link&gt;
  
            &lt;CSSTransitionGroup transitionName="like" transitionEnterTimeout={500} transitionLeaveTimeout={500}&gt;
              &lt;span key={post.likes} className="likes-heart"&gt;{post.likes}&lt;/span&gt;
            &lt;/CSSTransitionGroup&gt;
  
          &lt;/div&gt;
  
          &lt;figcaption&gt;
            &lt;p&gt;{post.caption}&lt;/p&gt;
  
            &lt;div className="control-buttons"&gt;
              &lt;button onClick={this.incrementQuery.bind(null,i)} className="likes"&gt;&amp;hearts; {post.likes}&lt;/button&gt;
  
              &lt;Link to={`/view/${post.id}`} className="button"&gt;
                &lt;span className="comment-count"&gt;
                  &lt;span className="speech-bubble"&gt;&lt;/span&gt; {(post.comments ? Object.keys(post.comments).length : 0)}
                &lt;/span&gt;
              &lt;/Link&gt;
            &lt;/div&gt;
  
          &lt;/figcaption&gt;
  
        &lt;/figure&gt;
      )
    }
  };
  
  Photo.PropTypes = {
    client: React.PropTypes.instanceOf(ApolloClient).isRequired,
    query: React.PropTypes.object,
    variables: React.PropTypes.object,
    data: React.PropTypes.shape({
      loading: React.PropTypes.bool.isRequired,
      error: React.PropTypes.bool.isRequired,
      updatePosts: React.PropTypes.object,
    }).isRequired,
  }
  
  const PhotoWithApollo = withApollo(Photo);
  
  export default PhotoWithApollo;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The thrown error is as follows:</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>Uncaught TypeError: Cannot read property 'props' of null
      at incrementQuery (http://localhost:7770/static/bundle.js:56347:12)
      at proxiedMethod (http://localhost:7770/static/bundle.js:54898:31)
      at HTMLUnknownElement.wrapped (http://localhost:7770/static/bundle.js:47347:30)
      at Object.ReactErrorUtils.invokeGuardedCallback (http://localhost:7770/static/bundle.js:6346:17)
      at executeDispatch (http://localhost:7770/static/bundle.js:6146:22)
      at Object.executeDispatchesInOrder (http://localhost:7770/static/bundle.js:6169:6)
      at executeDispatchesAndRelease (http://localhost:7770/static/bundle.js:5599:23)
      at executeDispatchesAndReleaseTopLevel (http://localhost:7770/static/bundle.js:5610:11)
      at Array.forEach (native)
      at forEachAccumulated (http://localhost:7770/static/bundle.js:6446:10)
      at Object.processEventQueue (http://localhost:7770/static/bundle.js:5815:8)
      at runEventQueueInBatch (http://localhost:7770/static/bundle.js:6475:19)
      at Object.handleTopLevel [as _handleTopLevel] (http://localhost:7770/static/bundle.js:6491:6)
      at handleTopLevelWithoutPath (http://localhost:7770/static/bundle.js:16697:25)
      at handleTopLevelImpl (http://localhost:7770/static/bundle.js:16677:4)
      at ReactDefaultBatchingStrategyTransaction.perform (http://localhost:7770/static/bundle.js:8643:21)
      at Object.batchedUpdates (http://localhost:7770/static/bundle.js:12680:20)
      at Object.batchedUpdates (http://localhost:7770/static/bundle.js:8148:21)
      at dispatchEvent (http://localhost:7770/static/bundle.js:16808:21)
      at HTMLDocument.wrapped (http://localhost:7770/static/bundle.js:47347:30)</code></pre>
  </div>
  </div>
  </p>