title: React Apollo Error: Invariant Violation: Could not find "client" in the context or passed in as an option
body: <p>I'm building a project using React, Apollo and Next.js. I'm trying to update react-apollo to 3.1.3 and I'm now getting the following error when viewing the site.</p>
  
  <blockquote>
    <p>Invariant Violation: Could not find "client" in the context or passed in as an option. Wrap the root component in an , or pass an ApolloClient instance in via options.</p>
  </blockquote>
  
  <p>If I downgrade the react-apollo package to 2.5.8 it works without issue so I'm thinking something has changed between 2.5 and 3.x but can't find anything in the react-apollo or next-with-apollo documentation to indicate what that might be. Any assistance would be greatly appreciated.</p>
  
  <p>withData.js</p>
  
  <pre><code>import withApollo from 'next-with-apollo';
  import ApolloClient from 'apollo-boost';
  import { endpoint } from '../config';
  
  function createClient({ headers }) {
      return new ApolloClient({
          uri: endpoint,
          request: operation =&gt; {
              operation.setContext({
                  fetchOptions: {
                      credentials: 'include'
                  },
                  headers
              });
          },
          // local data
          clientState: {
              resolvers: {
                  Mutation: {}
              },
              defaults: {}
          }
      });
  }
  
  export default withApollo(createClient);
  </code></pre>
  
  <p>_app.js</p>
  
  <pre><code>import App from 'next/app';
  import { ApolloProvider } from 'react-apollo';
  import Page from '../components/Page';
  import { Overlay } from '../components/styles/Overlay';
  import withData from '../lib/withData';
  
  class MyApp extends App {
      static async getInitialProps({ Component, ctx }) {
          let pageProps = {};
          if (Component.getInitialProps) {
              pageProps = await Component.getInitialProps(ctx);
          }
  
          // this exposes the query to the user
          pageProps.query = ctx.query;
          return { pageProps };
      }
  
      render() {
          const { Component, apollo, pageProps } = this.props;
  
          return (
              &lt;ApolloProvider client={apollo}&gt;
                  &lt;Overlay id="page-overlay" /&gt;
                  &lt;Page&gt;
                      &lt;Component {...pageProps} /&gt;
                  &lt;/Page&gt;
              &lt;/ApolloProvider&gt;
          );
      }
  }
  
  export default withData(MyApp);
  
  </code></pre>