React + GraphQL: Could not find "client" in the context or passed in as an option

Question

I am trying to use React + GraphQL to make a simple blog following the steps in this article. However, as opposed to the article, my blog does not live in App.js, but is instead a child component. Furthermore, I am not using the GraphCMS service proposed but am instead connecting to a Mongo database.

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.

That being said, I continually get the following error. It occurs anytime I include <Landing /> in blog.js.

Uncaught Invariant Violation: Could not find "client" in the context or passed in as an option.

I have looked around and found a few solutions, none of which have worked for me.

1. The <ApolloProvider> does not wrap the graphql(DATA_QUERY) - I have tried implementing this method all the way down to the child component to no affect.

2. Remove installed modules / check for mismatched versions - Made no visible difference.

   • Tried ApolloProvider from both react-apollo and @apollo/react-hooks.
3. Wrap a parent component with ApolloProvider - Not dissimilar from #1, in suggestion. Unsure, if in practice, is different.

Any help is greatly appreciated! Thank you, in advance!!

---

index.js

// @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 = () => {
  return (
    <StoreProvider> // Used elsewhere; removing made no difference
      <ApolloProvider client={client}>
        <App />
      </ApolloProvider>
    </StoreProvider>
  );
}

ReactDOM.render(<Index />, document.getElementById('root'));
serviceWorker.unregister();

app.js

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 = () => {
  return (
    <Router>
      <NavBar />
      <div className="App">
        <Route path="/" exact component={Home} />
        <Route path="/blog/" component={Blog} />
      </div>
    </Router>
  );
};

export default App;

blog.js

import React from 'react';
import Header from './header';
import PostsWrapper from './landing';

const Blog = () => {
  return (
    <main>
      <Header />
      <PostsWrapper />  // <== issue is here
    </main>
  )
}

export default Blog;

landing.js

import React from 'react';
import { graphql } from 'react-apollo';
import gql from 'graphql-tag';

const Landing = ({ data: { loading, blogPosts } }) => {

  if (!loading) {
    return (
      <div className="wrapper">
        {blogPosts.map(post => (
          <article className="content" key={post._id}>
            <h2>{post.title}</h2>
            <p dangerouslySetInnerHTML={{ __html: post.description }} />
          </article>
        ))}
      </div>
    );
  }
  return <h2>Loading Posts...</h2>
};

const blogPosts = gql`
  query {
    blogPosts {
      _id
      title
      description
    }
  }
`;

const PostsWrapper = graphql(blogPosts)(Landing);
export default PostsWrapper;

package.json - Pertinent bits

"@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"

---

EDIT

Error that shows when I mouse over (Landing) on graphql(blogPosts)(Landing) in Landing.js. 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.

Tried a few online solutions, including this to no avail.

const Landing: ({ data: { loading, blogPosts } }: {
    data: {
        loading: any;
        blogPosts: any;
    };
}) => JSX.Element

Argument of type '({ data: { loading, blogPosts } }: { data: { loading: any; blogPosts: any; }; }) => Element' is not assignable to parameter of type 'ComponentType<Partial<DataProps<{}, {}>> & Partial<MutateProps<{}, {}>>>'.
  Type '({ data: { loading, blogPosts } }: { data: { loading: any; blogPosts: any; }; }) => Element' is not assignable to type 'FunctionComponent<Partial<DataProps<{}, {}>> & Partial<MutateProps<{}, {}>>>'.
    Types of parameters '__0' and 'props' are incompatible.
      Type 'PropsWithChildren<Partial<DataProps<{}, {}>> & Partial<MutateProps<{}, {}>>>' is not assignable to type '{ data: { loading: any; blogPosts: any; }; }'.
        Types of property 'data' are incompatible.
          Property 'blogPosts' is missing in type 'QueryControls<{}, {}> & Partial<{}>' but required in type '{ loading: any; blogPosts: any; }'.ts(2345)

Answer 1

I was getting the same error as you and tried the same steps. I posted this to the Apollo Spectrum forum as well. My error started when I updated my packages to latest versions including @apollo/client.

I couldn't get it working and reverted back to the original packages which resolved the issue.