CODEWITHSUNDEEP
reactjsgraphqlapollonext.js
Keith
Keith

Reputation: 438

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

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

Upvotes: 40

Views: 66417

Answers (8)

Muzamil Aftab
Muzamil Aftab

Reputation: 1

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

Upvotes: 0

schrodinger&#39;s code
schrodinger&#39;s code

Reputation: 2724

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",
  },

Upvotes: 0

Willie Doc Wright
Willie Doc Wright

Reputation: 153

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

Upvotes: 12

buzuosheng
buzuosheng

Reputation: 2817

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

Upvotes: 0

Dhiraj Narsinghani
Dhiraj Narsinghani

Reputation: 141

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.

Upvotes: 5

Pranjal Koshti
Pranjal Koshti

Reputation: 185

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

Upvotes: 4

Isaac I9
Isaac I9

Reputation: 169

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.

Upvotes: 0

Duma Cristian
Duma Cristian

Reputation: 587

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!

Upvotes: 46

Related Questions