title: Calling a hook (useMutation) inside an event handler error: "Hooks can only be called inside of the body of a function component"
body: <p>I want to use a mutation in an event handler. My event is defined like so:</p>
  
  <pre><code>(JSX attribute) onOk?: ((e: React.MouseEvent&lt;any, MouseEvent&gt;) =&gt; void) | undefined
  </code></pre>
  
  <p>This is how I call the mutation from the client</p>
  
  <pre><code>export const IMPORT_INFO_MUTATION = gql`
    mutation ImportPolicy($data: ImportPolicyInput!) {
      importPolicy(data:$data)
      {
        _id
        name
      }
   }
  </code></pre>
  
  <p>And eventually I call it like so:</p>
  
  <pre><code>      onOk={() =&gt; {
  
          useImportPolicyMutation({
            variables: {
              data: {
                jsonData: JSON.parse(importPolicyData)
              }
            },
          })
        }
  </code></pre>
  
  <p>`Don't worry about the variables and params in the mutation. They are fine. The issue is that I get the following error:</p>
  
  <pre><code>Unhandled Rejection (Invariant Violation): Invalid hook call. Hooks can only 
  be called inside of the body of a function component. This could happen for 
  one of the following reasons:
  1. You might have mismatching versions of React and the renderer (such as React DOM)
  
  2. You might be breaking the Rules of Hooks
  
  3. You might have more than one copy of React in the same app
  </code></pre>
  
  <p>It is a hook because the useMutation is defined like so:</p>
  
  <pre><code>  return ReactApolloHooks.useMutation&lt;ImportPolicyMutation, ImportPolicyMutationVariables&gt;(
     ImportPolicyDocument,
  baseOptions
   )
  </code></pre>
  
  <p>So, how do I call a mutation inside an event handler?</p>