apollo-client: Could not find "client" in the context of Apollo(MyComponent). Wrap the root component in an

I got this error when trying to use @apollo/react-hooks

The solution as suggested by @sampathsris is to wrap your app with both ApolloProvider from both the new hooks lib and the original react-apollo lib

import { ApolloProvider } from 'react-apollo'
import { ApolloProvider as ApolloHooksProvider } from '@apollo/react-hooks'

<ApolloProvider client={client}>
  <ApolloHooksProvider client={client}>
   {/* App here! */}
  </ApolloHooksProvider>
</ApolloProvider>

Edit: This does not seem to work anymore. Move along. But sure, go visit the link if you’re curious.

In case you got this error while using react-apollo-hooks, you may want to take a look at this sandbox: https://codesandbox.io/s/vnr2lqvrm0.

@ahmedbrandver I fixed my issue, what was happening to me was that I using the hooks from both @apollo/client and @apollo/react-hooks. What I did to fix it was remove the @apollo/react-hooks library and just import the hooks or anything GraphQL related from @apollo/client.

I got this error when trying to use @apollo/react-hooks

The solution as suggested by @sampathsris is to wrap your app with both ApolloProvider from both the new hooks lib and the original react-apollo lib

import { ApolloProvider } from 'react-apollo'
import { ApolloProvider as ApolloHooksProvider } from '@apollo/react-hooks'

<ApolloProvider client={client}>
  <ApolloHooksProvider client={client}>
   {/* App here! */}
  </ApolloHooksProvider>
</ApolloProvider>

Why does this solution work? it feels wrong to have to import two different providers? can someone explain please.

Had the same issue, aparently you cant use tags and hooks at the same time. If you use hooks, dont use tags. Also, ApolloProvider should be imported from @apollo/react-hooks instead of “react-apollo”

Source: https://spectrum.chat/apollo/react-apollo/error-using-hooks-beta-could-not-find-client~777fcc0e-d590-44f1-99e1-d709a7df5c35?m=MTU2MDMzNjkyNTA3NQ==

Wrapping the test in with <MockedProvider> solved it for me using:

import { MockedProvider } from "@apollo/client/testing";

I am using the newer version ApolloV3

I have used the latest version following the official docs with “@apollo/client”: “^3.2.3”, and I went through the same problem.

same here. i’m on version 3.3.2.

it actually only happens on certain components for me. I have the whole app wrapped with the ApolloProvider though.

Following these instructions: https://www.apollographql.com/docs/react/get-started/ I was dismayed when the error “Uncaught ReferenceError: client is not defined” showed up – and I had exactly copied their code…

import React from 'react';
import { render } from 'react-dom';

import { ApolloProvider } from '@apollo/react-hooks';

const App = () => (
  <ApolloProvider client={client}>
    <div>
      <h2>My first Apollo app 🚀</h2>
    </div>
  </ApolloProvider>
);

render(<App />, document.getElementById('root'));

It took a while before I realized that they left out the client definition in their ApolloProvider example…

It works once you bring the client definition in:

import React from 'react';
import { render } from 'react-dom';

import { ApolloProvider } from '@apollo/react-hooks';
import ApolloClient from 'apollo-boost';

const App = () => {

    const client = new ApolloClient({
    uri: 'https://48p1r2roz4.sse.codesandbox.io',
    });

    return (
        <ApolloProvider client={client}>
            <div>
            <h2>My first Apollo app 🚀</h2>
            </div>
        </ApolloProvider>
    );

};

render(<App />, document.getElementById('root'));

cheers, Al;

In case you got this error while using react-apollo-hooks, you may want to take a look at this sandbox: https://codesandbox.io/s/vnr2lqvrm0.

I am using react-apollo-hooks and had the components set up just like the sandbox (Root, not BuggyRoot), but still got the error.

Reverting back to 2.5.2 ‘fixed’ it for now. https://github.com/apollographql/react-apollo/issues/2900

I had this issue when I introduced server side rendering to an app. Here’s how the problematic code was setup:

...
import DisplayComponent from './DisplayComponent';

const client = new ApolloClient({ ...config });

function MyComponent() {
  return (
    <DisplayComponent
      queryVal="foo"
    />
  )
}

ReactDOM.render(
  <ApolloProvider client={client}>
    <MyComponent />
  </ApolloProvider>,
  document.getElementById('mount-div-id'),
);

export default MyComponent;

I got the error that is in the title of the issue. I fixed it by updating my code to this:

...
import DisplayComponent from './DisplayComponent';

const client = new ApolloClient({ ...config });

function MyComponent() {
  return (
    <ApolloProvider client={client}>
      <DisplayComponent
        queryVal="foo"
      />
    </ApolloProvider>
  )
}

ReactDOM.render(
  <MyComponent />,
  document.getElementById('mount-div-id'),
);

export default MyComponent;

Hopefully that helps someone.

Is anyone else running into this when trying to run the official docs demo for hooks? From what I understand, everything has been now bundled into @apollo/client. Is that correct? I’m running "@apollo/client": "^3.0.2""

Tried with react-apollo too, no luck 😦 @ptimson

"@apollo/react-hooks": "3.0.0",
"apollo-boost": "^0.4.7",
"graphql": "^14.5.8",

Used all the version combinations from 3.0.0 to 3.1.x same error msg " Unhandled Rejection (Invariant Violation): Could not find “client” in the context or passed in as an option. Wrap the root component in an <ApolloProvider>, or pass an ApolloClient instance in via options."

Doc says we should install @apollo/react-hooks and import ApolloProvider, none of this are working,

I am just trying to setup hello world project for apollo client 😦 any one have boilerplate or working version combinations, Please share it.

Thanks!

In my use case, this issue was caused by duplicate copies of @apollo/client in my bundle. The fix was to force webpack to resolve a single copy of the module:

{
  resolve: {
    alias: {
      '@apollo/client': require.resolve('@apollo/client')
    }
  }
}

I have used the latest version following the official docs with “@apollo/client”: “^3.2.3”, and I went through the same problem.

@Kallirroi I am also currently attempting this with "@apollo/client": "^3.0.2", and after going through this thread, I’m more confused than ever. I got to this error when attempting to use the useLazyQuery hook, and after attempting the recipe offered by @ptimson I had no luck. Please report back if you find anything as this appears to still cause some issues.

This might work

1. rm -rf node_modules package-lock.json
2. npm install

Maybe there is some issue with npm cache, if it still doesn’t work try npm cache clean --force

Note: this will clean all your your node dependencies, however the package.json file is not deleted. Use these commands at own risk.

2.5.2 worked for me too. But I didn’t used react-apollo, solved it by creating HOC on hooks for classes)).

import React from 'react';
import { useQuery } from '@apollo/react-hooks';


export const Query = ({children, query, variables}) => {
  const graphqlState = useQuery(query, variables);
  return (
    <div>
      {
        React.Children.map(children, child =>
          React.cloneElement(child, { ...graphqlState })
        )
      }
    </div>
  )
};

And then use it:

import React, { Component } from 'react';
import gql from 'graphql-tag';
import { Query } from '@/utils/withApollo';

import MaterialsTable from '@/components/MaterialsTable';

const GET_CONTENT_UNITS = gql`
  query GetContentUnits($input: ContentUnitFilterInput) {
    getContentUnits(input: $input) {
      name
      id
      cover
      price
    }
  }
;

export default class Dashboard extends Component {
  render() {
    return (
      <div>
        <h1>Dashboard</h1>
        <Query query={GET_CONTENT_UNITS}>
          <MaterialsTable />
        </Query>
      </div>
    );
  }
}

i guess you can now just use <ApolloConsumer>

@oakmad I know this isn’t helpful in any way, but I just started running into this issue today and I have no idea why. I’ll report back if I figure it out, but it’s definitely nothing to do with conditional rendering.

EDIT: It was after lunch and my brain wasn’t working, all I had to do was mock the provider because it was failing tests but running correctly in the app.

@thierryskoda @oakmad Sorry guys, i’ve not revisited this yet. But a work around would be to either import the client again https://stackoverflow.com/questions/40634872/do-i-need-to-bind-to-a-component-to-use-the-apollo-react-client-even-if-it-has-n

or use HOC from apollo http://dev.apollodata.com/react/higher-order-components.html#withApollo