title: Apollo Client Error: Could not find "client" in the context or passed in as an option. Wrap the root component in an <ApolloProvider>
body: <p>I am new to do this Apollo.</p>
  <p>I am currently trying to get create an app with React and Apollo.</p>
  <p>When I start my application, I am getting the following error:</p>
  <p>Could not find &quot;client&quot; in the context or passed in as an option. Wrap the root component in an , or pass an ApolloClient instance in via options.</p>
  <pre><code>Here is my RegisterController -&gt; index.tsx
  
  import * as React from &quot;react&quot;;
  import { ChildMutateProps, graphql } from 'react-apollo';
  import gql from 'graphql-tag';
  
  interface Props {
    children: (
      data: { submit: (values: any) =&gt; Promise&lt;null&gt; }
    ) =&gt; JSX.Element | null;
  }
  
  class C extends React.PureComponent&lt;ChildMutateProps&lt;Props, any, any&gt;&gt; {
    submit = async (values: any) =&gt; {
      console.log(values);
  
      const response = await this.props.mutate({
        variables: values
      });
  
      console.log('response: ', response);
  
      return null;
    };
  
    render() {
      return this.props.children({ submit: this.submit });
    }
  }
  
  const registerMutation = gql`
    mutation($email: String!, $password: String!) {
      register(email: $email, password: $password) {
        path
        message
      }
    }
  `;
  
  export const RegisterController = graphql(registerMutation)(C);
  </code></pre>
  <p>Here is my main index.tsx</p>
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  
  import reportWebVitals from './reportWebVitals';
  import { ApolloProvider } from 'react-apollo';
  import { client } from './apollo';
  import { Routes } from './routes';
  import &quot;./index.css&quot;;
  
  ReactDOM.render(
    &lt;ApolloProvider client={client}&gt;
      &lt;React.StrictMode&gt;
        &lt;Routes /&gt;
      &lt;/React.StrictMode&gt;
    &lt;/ApolloProvider&gt;,
    document.getElementById('root')
  );
  </code></pre>
  <p>Finally, here is my package.json</p>
  <pre><code>{
    &quot;name&quot;: &quot;@abb/controller&quot;,
    &quot;version&quot;: &quot;1.0.0&quot;,
    &quot;main&quot;: &quot;dist/index.js&quot;,
    &quot;typings&quot;: &quot;dist/index.d.ts&quot;,
    &quot;license&quot;: &quot;MIT&quot;,
    &quot;scripts&quot;: {
      &quot;build&quot;: &quot;rm -rf ./dist &amp;&amp; tsc&quot;
    },
    &quot;dependencies&quot;: {
      &quot;graphql&quot;: &quot;^15.4.0&quot;,
      &quot;graphql-tag&quot;: &quot;^2.11.0&quot;,
      &quot;react&quot;: &quot;^17.0.1&quot;,
      &quot;react-apollo&quot;: &quot;^3.1.5&quot;,
      &quot;react-dom&quot;: &quot;^17.0.1&quot;
    },
    &quot;devDependencies&quot;: {
      &quot;@types/node&quot;: &quot;^14.14.20&quot;,
      &quot;@types/react&quot;: &quot;^17.0.0&quot;,
      &quot;@types/react-dom&quot;: &quot;^17.0.0&quot;,
      &quot;tslint&quot;: &quot;^6.1.3&quot;,
      &quot;tslint-config-prettier&quot;: &quot;^1.18.0&quot;,
      &quot;typescript&quot;: &quot;^4.1.3&quot;
    }
  }
  </code></pre>
  <p>As you can see in my index.tsx, it is wrapped with ApolloProvider with the client passing in there.
  Why I am getting this error?
  Could anyone please help me with this issue?</p>
  <p>Thank you.</p>