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.

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);

Duma CristianDuma Cristian 5775 silver badges11 bronze badges · Accepted Answer · 2019-10-20 18:33:32Z

46

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!

answered Oct 20, 2019 at 18:33

Duma Cristian

5775 silver badges11 bronze badges

4

2

Then there's also react-apollo-hooks vs @apollo/react-hooks — you want the latter, watch out!

– Gunar Gessner

Dec 13, 2019 at 21:46
8

Similar case for me- I had been importing ApolloProvider from react-apollo but importing useQuery from @apollo/react-hooks. Importing ApolloProvider from @apollo/react-hooks fixed the issue for me.

– DannyRosenblatt

Mar 10, 2020 at 1:08
@DannyRosenblatt that was the case for me as well, I think most of the tutorials online follow the approach of importing the ApolloProvider from 'react-apollo' instead of @apollo/react-hooks.

– Hackman

Jul 22, 2020 at 12:01
3

The documentation for apollo v2 is terrible – if you wanna use react components, instead of hooks, you'll need to manually install @apollo/react-components and import everything from there instead. It doesn't say that anywhere, had to figure it out hard way.

– Marko

Mar 15, 2021 at 13:44

crispengari 7,9617 gold badges45 silver badges54 bronze badges · Accepted Answer · 2021-09-27 16:56:45Z

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

Dhiraj NarsinghaniDhiraj Narsinghani 1211 silver badge3 bronze badges · Accepted Answer · 2020-12-09 05:22:17Z

5

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.

answered Dec 9, 2020 at 5:22

Dhiraj Narsinghani

1211 silver badge3 bronze badges

Pranjal KoshtiPranjal Koshti 1472 silver badges8 bronze badges · Accepted Answer · 2020-11-26 12:46:49Z

4

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

answered Nov 26, 2020 at 12:46

Pranjal Koshti

1472 silver badges8 bronze badges

0

Isaac I9Isaac I9 1392 silver badges7 bronze badges · Accepted Answer · 2020-08-10 17:32:24Z

0

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.

answered Aug 10, 2020 at 17:32

Isaac I9

1392 silver badges7 bronze badges

1

7

You found what to be the solution?

– Daniel

Aug 24, 2021 at 12:43

buzuoshengbuzuosheng 2,4391 gold badge4 silver badges3 bronze badges · Accepted Answer · 2021-03-12 04:55:38Z

0

import {ApolloProvider} from ‘apollo/client’ instead ‘react-apollo’or ‘@apollo/react-hooks’

answered Mar 12, 2021 at 4:55

buzuosheng

2,4391 gold badge4 silver badges3 bronze badges

score 0 · Accepted Answer · 2023-03-26 21:24:45Z

0

I ran into same issue and the following fixed the issue for me:

 "resolutions": {
    "@apollo/react-common": "3.1.3",
    "@apollo/react-hooks": "3.1.3",
  },

answered Mar 26 at 21:24

schrodinger's code

2,6341 gold badge25 silver badges19 bronze badges

Muzamil AftabMuzamil Aftab 1 · Accepted Answer · 2023-09-15 20:29:56Z

0

import { ApolloClient, InMemoryCache, HttpLink } from ‘@apollo/client’;
this will solve the problem in next js .
also import useQueries or useMutation from ‘@apollo/client’

answered 24 mins ago

Muzamil Aftab

1

New contributor

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