title: React + GraphQL: Could not find "client" in the context or passed in as an option
body: <p>I am trying to use React + GraphQL to make a simple blog following the steps in this <a href="https://medium.com/@shakhorsmith/how-to-make-a-blog-with-react-graphql-1fae580dde8a" rel="nofollow noreferrer">article</a>. However, as opposed to the article, my blog does not live in  <code>App.js</code>, but is instead a child component. Furthermore, I am not using the GraphCMS service proposed but am instead connecting to a Mongo database.</p>
  
  <p>The GraphQL server works fine. I can query it independently and, under a different implementation, I could get all posts. I abandoned that approach due to it being overly complex.</p>
  
  <p>That being said, I continually get the following error. It occurs anytime I include <code>&lt;Landing /&gt;</code> in <code>blog.js</code>.</p>
  
  <p><code>Uncaught Invariant Violation: Could not find "client" in the context or passed in as an option.</code></p>
  
  <p>I have looked around and found a few solutions, none of which have worked for me.</p>
  
  <ol>
  <li><a href="https://stackoverflow.com/a/49847240/3962636">The <code>&lt;ApolloProvider&gt;</code> does not wrap the <code>graphql(DATA_QUERY)</code></a> - I have tried implementing this method all the way down to the child component to no affect.</li>
  <li><p><a href="https://stackoverflow.com/a/58476065/3962636">Remove installed modules / check for mismatched versions</a> - Made no visible difference.</p>
  
  <ul>
  <li>Tried <code>ApolloProvider</code> from both <code>react-apollo</code> and <code>@apollo/react-hooks</code>.</li>
  </ul></li>
  <li><a href="https://spectrum.chat/apollo/general/invariant-violation-could-not-find-client-in-the-context-or-passed-in~6046b915-be4a-490c-b10a-08905a934a84?m=MTU2NTI0ODI1NDM2Ng==" rel="nofollow noreferrer">Wrap a parent component with ApolloProvider</a> - Not dissimilar from #1, in suggestion. Unsure, if in practice, is different.</li>
  </ol>
  
  <p>Any help is greatly appreciated! Thank you, in advance!!</p>
  
  <hr>
  
  <p><strong>index.js</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>// @ts-check
  import React from 'react';
  import ReactDOM from 'react-dom';
  import { StoreProvider } from './context/StoreContext';
  import ApolloClient from 'apollo-client';
  import { HttpLink } from 'apollo-link-http';
  import { InMemoryCache } from 'apollo-cache-inmemory';
  import { ApolloProvider } from '@apollo/react-hooks';
  import * as serviceWorker from './serviceWorker';
  
  import App from './app';
  
  // Have tried both with and without `/graphql` appended
  const API = 'http://localhost:4000';
  // const API = 'http://localhost:4000/graphql';
  
  const client = new ApolloClient({
    link: new HttpLink({ uri: API }),
    cache: new InMemoryCache()
  });
  
  
  const Index = () =&gt; {
    return (
      &lt;StoreProvider&gt; // Used elsewhere; removing made no difference
        &lt;ApolloProvider client={client}&gt;
          &lt;App /&gt;
        &lt;/ApolloProvider&gt;
      &lt;/StoreProvider&gt;
    );
  }
  
  ReactDOM.render(&lt;Index /&gt;, document.getElementById('root'));
  serviceWorker.unregister();
  </code></pre>
  
  <p><strong>app.js</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>import React from 'react';
  import { BrowserRouter as Router, Route } from 'react-router-dom';
  
  import NavBar from './routes/nav/navbar';
  import Home from './routes/home/home';
  import Blog from './routes/blogger/blog';
  
  
  const App = () =&gt; {
    return (
      &lt;Router&gt;
        &lt;NavBar /&gt;
        &lt;div className="App"&gt;
          &lt;Route path="/" exact component={Home} /&gt;
          &lt;Route path="/blog/" component={Blog} /&gt;
        &lt;/div&gt;
      &lt;/Router&gt;
    );
  };
  
  export default App;
  </code></pre>
  
  <p><strong>blog.js</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>import React from 'react';
  import Header from './header';
  import PostsWrapper from './landing';
  
  const Blog = () =&gt; {
    return (
      &lt;main&gt;
        &lt;Header /&gt;
        &lt;PostsWrapper /&gt;  // &lt;== issue is here
      &lt;/main&gt;
    )
  }
  
  export default Blog;
  </code></pre>
  
  <p><strong>landing.js</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>import React from 'react';
  import { graphql } from 'react-apollo';
  import gql from 'graphql-tag';
  
  const Landing = ({ data: { loading, blogPosts } }) =&gt; {
  
    if (!loading) {
      return (
        &lt;div className="wrapper"&gt;
          {blogPosts.map(post =&gt; (
            &lt;article className="content" key={post._id}&gt;
              &lt;h2&gt;{post.title}&lt;/h2&gt;
              &lt;p dangerouslySetInnerHTML={{ __html: post.description }} /&gt;
            &lt;/article&gt;
          ))}
        &lt;/div&gt;
      );
    }
    return &lt;h2&gt;Loading Posts...&lt;/h2&gt;
  };
  
  const blogPosts = gql`
    query {
      blogPosts {
        _id
        title
        description
      }
    }
  `;
  
  const PostsWrapper = graphql(blogPosts)(Landing);
  export default PostsWrapper;
  </code></pre>
  
  <p><strong>package.json</strong> - Pertinent bits</p>
  
  <pre><code>"@apollo/react-hooks": "^3.1.3",
      "apollo-boost": "^0.4.4",
      "apollo-cache-inmemory": "^1.6.3",
      "apollo-client": "^2.6.4",
      "apollo-link-http": "^1.5.16",
      "react-apollo": "^3.1.3",
      "react": "^16.10.2",
      "react-bootstrap": "^1.0.0-beta.14",
      "react-dom": "^16.10.2",
      "react-router": "^5.1.2",
      "react-router-dom": "^5.1.2"
  </code></pre>
  
  <hr>
  
  <h3>EDIT</h3>
  
  <p>Error that shows when I mouse over <code>(Landing)</code> on <code>graphql(blogPosts)(Landing)</code> in <code>Landing.js</code>. There is no error in the sandbox version I created to match the article sample. Matched my app to sandbox but then this error is generated.</p>
  
  <p>Tried a few online solutions, including <a href="https://github.com/DefinitelyTyped/DefinitelyTyped/issues/17161" rel="nofollow noreferrer">this</a> to no avail.</p>
  
  <pre><code>const Landing: ({ data: { loading, blogPosts } }: {
      data: {
          loading: any;
          blogPosts: any;
      };
  }) =&gt; JSX.Element
  
  Argument of type '({ data: { loading, blogPosts } }: { data: { loading: any; blogPosts: any; }; }) =&gt; Element' is not assignable to parameter of type 'ComponentType&lt;Partial&lt;DataProps&lt;{}, {}&gt;&gt; &amp; Partial&lt;MutateProps&lt;{}, {}&gt;&gt;&gt;'.
    Type '({ data: { loading, blogPosts } }: { data: { loading: any; blogPosts: any; }; }) =&gt; Element' is not assignable to type 'FunctionComponent&lt;Partial&lt;DataProps&lt;{}, {}&gt;&gt; &amp; Partial&lt;MutateProps&lt;{}, {}&gt;&gt;&gt;'.
      Types of parameters '__0' and 'props' are incompatible.
        Type 'PropsWithChildren&lt;Partial&lt;DataProps&lt;{}, {}&gt;&gt; &amp; Partial&lt;MutateProps&lt;{}, {}&gt;&gt;&gt;' is not assignable to type '{ data: { loading: any; blogPosts: any; }; }'.
          Types of property 'data' are incompatible.
            Property 'blogPosts' is missing in type 'QueryControls&lt;{}, {}&gt; &amp; Partial&lt;{}&gt;' but required in type '{ loading: any; blogPosts: any; }'.ts(2345)
  </code></pre>