apollo-client: 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.

@karansinghgit Ahh, I think the problem is that you’re calling useQuery before you’ve created your <ApolloProvider client={client}/> component, so useQuery can’t find any ApolloProvider above it in the component tree, and thus can’t find the client. I think you might want to move the client creation and ApolloProvider wrapping code out of your App component, so the App component can safely call useQuery. If that’s not an option, you can move the useQuery code down into a nested component that’s rendered inside the <ApolloProvider/> component.

After long hours i figured out this nonesense https://github.com/apollographql/apollo-client/issues/7112#issuecomment-702884623 works. This project starting to become ridiculous. @apollo/client@^3.4.0-beta.20

I am also encountering this issue.

In my case, it is not due to the use of outdated libraries (all of my imports are from @apollo/client@latest).

If I use a hook (e.g. useMutation) in a nextjs page, everything works fine.

If, however, I move that useMutation() call to one of that page’s children, I get the referenced error.

I don’t know how react context plays with nextjs, and nextjs’ nightmare of a routing system probably messes with things, but my understanding is that ApolloProvider should provide the client to any children components (without HOCs, which aren’t exactly best-practices any longer and add extra boilerplate, something Apollo has enough of already cough list insert cache updates cough), so I’m not sure why it’s not working. Obviously, calling all my Apollo hooks in root page components isn’t a viable long-term solution, so I hope someone who understands the intricacies of how these two libraries are meant to interact can shine some light onto the situation.

Today I also got into this trap, though I “thought” that I did follow their tutorial very carefully 😃)

But the trick is, you need to use the useQuery in a child component of where you wrap with <ApolloProvider client={client}>

In their Quick Started guide, they have to use useQuery inside of the ExchangeRates component: https://www.apollographql.com/docs/react/get-started/#request-data

@karansinghgit Ahh, I think the problem is that you’re calling useQuery before you’ve created your <ApolloProvider client={client}/> component, so useQuery can’t find any ApolloProvider above it in the component tree, and thus can’t find the client. I think you might want to move the client creation and ApolloProvider wrapping code out of your App component, so the App component can safely call useQuery. If that’s not an option, you can move the useQuery code down into a nested component that’s rendered inside the <ApolloProvider/> component.

Thank you for sharing this! I used this approach and resolved the issue 👍

@An0r4k the suggestion provided by @benjamn worked for me. My current App.tsx looks like:

import React from "react";
import { RootProvider } from './src/navigation';

export default function App() {

  return (
    <RootProvider />
  );

}

where RootProvider element is in another file:

import React from 'react';

import { NavigationContainer } from '@react-navigation/native';
import RootNavigator from './RootNavigator';
import { ApolloClient, InMemoryCache, ApolloProvider } from "@apollo/client";

const client = new ApolloClient({
  uri: 'MY_HASURA_INSTANCE_URL',
  headers: {
    'x-hasura-admin-secret': 'MYADMINSECRETKEY'
  },
  cache: new InMemoryCache()
});

export function Navigation() {
  return (
    <NavigationContainer>
      <RootNavigator />
    </NavigationContainer>
  );
};

export function RootProvider() {
  return (
    <ApolloProvider client={client}>
      < Navigation />
    </ApolloProvider>
  );
}

It’s possible the error is related to package version mismatches.

I decided to try @apollo/client@^3.4.0-beta.19 and I ran into this issue. In my case I think I had two issues:

1. I am using yarn workspaces and lerna and my projects root package.json was resolving to an older version of @apollo/client even after a clean bootstrap. Setting the @apollo/client version in the root dependencies fixed this - though the next step may have made this unnecessary.
2. Assuming other apollo packages are relying on an older @apollo/client, they may not be resolving correctly. I am using webpack, and to ensure all packages resolve to the same @apollo/client, I added an alias to my config. Something like the following in webpack.config.js:

webpack.resolve.alias: { ‘@apollo/client’: path.resolve(__dirname, ‘node_modules’, ‘@apollo’, ‘client’) }

I no longer have the error.

EDIT: Thanks to this comment on a related type issue I was having, I instead opted to use yarns resolution in the root package.json instead of the above two more complicated steps.

/* package.json */

	...
	"resolutions": {
		"@apollo/client": "^3.4.0-beta.19"
	},
	...

I no longer have the error and my type errors are gone.

@davidcostadev none of those

@stevematdavies are you using @apollo/react-components, @apollo/react-hoc, @apollo/react-ssr, @apollo/react-testing, @apollo/react-hooks?

Exactly the same problem, just happened with no updates or changes. First disappears when the cache is cleaned but then on next page render its back.

Using “react-apollo”: “^2.5.2”,

import client from './api/Apollo' // This is fine..

 <I18nextProvider i18n={i18n}>
    <ApolloProvider client={client}>

client is a successful import and is there, no lint errors no runtime errors, just this, and its turning out to be pretty serious issue

Could not find "client" in the context of ApolloConsumer. Wrap the root component in an <ApolloProvider>

There is no option to up or downgrade for various reasons.