title: Properly typing Apollo Mutation render prop for onClick handler
body: <p>I am currently attempting to rewrite the HowToGraphQL tutorial in TypeScript and have created a custom mutation class with corresponding query as follows:</p>
  
  <pre><code>export const postMutation = gql`
      mutation PostMutation($description: String!, $url: String!) {
          post(description: $description, url: $url) {
              id
              createdAt
              url
              description
          }
      }
  `;
  
  export interface PostMutationData {
      post: {
          id: string;
          createdAt: string;
          url: string;
          description: string;
      };
  }
  
  export interface PostMutationVariables {
      description: string;
      url: string;
  }
  
  export class PostMutation extends Mutation&lt;PostMutationData, PostMutationVariables&gt; {}
  </code></pre>
  
  <p>The component that consumes the mutation basically looks like this:</p>
  
  <pre><code>&lt;PostMutation mutation={postMutation} variables={{ description, url }}&gt;
      {(onMutate) =&gt; &lt;button onClick={onMutate}&gt;Submit&lt;/button&gt;}
  &lt;/PostMutation&gt;
  </code></pre>
  
  <p>Unfortunately the compiler is complaining and saying that I cannot assign <code>onMutate</code> to <code>onClick</code> with the following error messages:</p>
  
  <pre><code>Type 'MutationFn&lt;PostMutationData, PostMutationVariables&gt;' is not assignable to type '(event: MouseEvent&lt;HTMLButtonElement&gt;) =&gt; void'.
      Types of parameters 'options' and 'event' are incompatible.
          Type 'MouseEvent&lt;HTMLButtonElement&gt;' has no properties in common with type 'MutationOptions&lt;PostMutationData, PostMutationVariables&gt;'.
  </code></pre>
  
  <p>I'd like to know how to assign the <code>onMutate</code> handler to <code>onClick</code> properly.</p>