React Apollo Error: Invariant Violation: Could not find "client" in the context or passed in as an option
Solution 1
In my case, I found that I had [email protected]
installed as well as @apollo/[email protected]
. 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!
Solution 2
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
Then:
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
Solution 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.
Solution 4
I uninstalled 'react-apollo', used '@apollo/client' instead, it solved the issue for me.
Solution 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.
Keith
Updated on September 28, 2021Comments
-
Keith over 2 years
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.
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.
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.
withData.js
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 => { operation.setContext({ fetchOptions: { credentials: 'include' }, headers }); }, // local data clientState: { resolvers: { Mutation: {} }, defaults: {} } }); } export default withApollo(createClient);
_app.js
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 ( <ApolloProvider client={apollo}> <Overlay id="page-overlay" /> <Page> <Component {...pageProps} /> </Page> </ApolloProvider> ); } } export default withData(MyApp);