title: How to use GraphQL mutation in Next.js without useMutation
body: <p>I'm working on a codebase with <code>Next.js</code> version 9.3.0 and <code>GraphQL</code>. To get the benefits of Next.js optimizations, we are wrapping each page in <code>withApollo</code>, so inside the pages we can make use of <code>useQuery</code>, <code>useMutation</code>.
  The issue I'm facing is that I need to use mutation in the <code>Header component</code> which is outside the page, which doesn't have access to <code>ApolloClient</code> because the app is not wrapped in <code>withApollo</code>.</p>
  
  <p>The error I'm getting is this <code>Could not find "client" in the context or passed in as an option. Wrap the root component in an &lt;ApolloProvider&gt;, or pass an ApolloClient instance in via options.</code></p>
  
  <p>The <code>Header</code> component is inside the <code>Layout</code> component like this:</p>
  
  <pre><code>&lt;&gt;
     &lt;Meta /&gt;
     &lt;Header/&gt;
     {children} // pages which are composed with withApollo
     &lt;Footer /&gt;
  &lt;/&gt;
  </code></pre>
  
  <p>Instead of using <code>useQuery</code> in a component <strong>without</strong> <code>withApollo</code> is easy you can use</p>
  
  <pre><code>import { createApolloFetch } from 'apollo-fetch';
  
  const fetch = createApolloFetch({
      uri: process.env.GRAPHQL_SERVER,
  });
  
  const userInfoQuery = `{
      userInfo {
          loggedIn
          basketCount
          wishListCount
      }
  }`;
  
  const userInfoData = fetch({
        query: userInfoQuery,
  });
  </code></pre>
  
  <p>Is there an alternative solution for <code>useMutation</code> in a component not composed with <code>withApollo</code>?</p>
  
  <p>Any suggestions are welcomed,
  Cheers</p>