React Apollo Error: Invariant Violation: Could not find “client” in the context or passed in as an option

Question

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.

Answer 1

I've had a mixture of solutions, i think it does boil down to how you initially go about setting up all the related packages. "Some packages don't work well with others when it comes to connecting the client to Reacts Context.Provider"

I've had two go two fixes that seem to work well (With new projects and updating old):

1: Uninstall "@apollo/react-hooks"

2: import { ApolloProvider } from "@apollo/client"; instead of import { ApolloProvider } from "react-apollo"; (This allowed me to keep the "@apollo/react-hooks" package without conflicts)

3: Double-check that the server that is serving HttpLink client URI is up and running for the client to connect (This give a different error then the one were talking about but is still good to know in this situation)

Conclusion: It can be a slight bit of trial and error, but try to use the matching/pairing packages

Answer 2

In my case, I found that I had react-apollo@3.0.1 installed as well as @apollo/react-hooks@3.0.0. Removing @apollo/react-hooks and just relying on react-apollo fixed the invariant issue for me. Make sure that you aren't using any mismatched versions in your lock file or package.json

This is what someone said in a GitHub issue thread, which, was the case for me too. Make sure you try it!

Answer 3

import gql from 'graphql-tag';
import {graphql} from '@apollo/react-hoc';
import { ApolloClient, InMemoryCache } from '@apollo/client';
import { ApolloProvider } from '@apollo/react-hooks';

These imports worked for me perfectly. I had a great time debugging and finding different import libraries but finally after 3 hours this was the solution for using graphql and appolo.

Answer 4

I uninstalled 'react-apollo', used '@apollo/client' instead, it solved the issue for me.

Answer 5

I found this to be the solution as well, though now I'm only using @apollo/client and apollo-link since they are the latest version.