React-apollo: Inconsistency beetween react-apollo and @apollo/reac-hooks packages

[Vaneste]

Using either ApolloProvider from react-apollo package or @apollo/react-hooks package should provide the same result.

But if you mix both package : ApolloProvider from react-apollo and say, useQuery from @apollo/react-hooks, you'll end up with a "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." error.

Apollo documentation states that you can use react-apollo OR only @apollo/react-hooks if you just want to use hooks. Implicitely, that means that @apollo/react-hooks is kinf of subset of react-apollo package. So both package should be compatible for using ApolloProvider but this is not the case.

How to reproduce the issue:

Just try to import ApolloProvider from react-apollo and useQuery from @apollo/react-hooks and you'll get the error.

Version
Reproduce on : https://codesandbox.io/s/nameless-meadow-jhk6p
Just change the comment in the package.json to get the error.
Package version :
"react-apollo": "^2.5.6",
"apollo-client": "2.6.4",
"@apollo/react-hooks": "^3.0.0",
Thanks to Alex Banks for his tutorial and the codesandbox sample !

[jackyef]

I am having a similar issue.

When my whole app only use hooks, I can only import ApolloProvider from @apollo/react-hooks. If I import ApolloProvider from @apollo/react-common, it would fail to find client.

I would expect that importing ApolloProvider from either @apollo/react-common or @apollo/react-hooks would have the same outcome.

[Ayc0]

This is normal, the provider changed between the v2 and the v3
react-apollo v3 is using the same as @apollo/react-hooks, but as yours is still in v2, it tries to basically import 2 different libraries.

In general, you should only have one graphql version and one apollo verison.

Bump your react-apollo to "^3.0.0" and it should be fine

[jackyef]

@Ayc0 Hi, I updated my comment. I am having similar problem but with @apollo/react-common. Should I open a new issue or keep it here?

[Ayc0]

@jackyef, what are the versions of your packages?

There shouldn't be any difference between importing ApolloClient from @apollo/react-hooks and @apollo/react-common because under the hood, they are the same: export statement in the codebase (if they have the same version)

But if you have a mismatched version of react-apollo, there should be an error because it is not using the same package

[Ayc0]

(also look at your lock file to see what is the real versions of every packages and try to clear and reinstall your node_modules)

[jackyef]

I am either importing @apollo/react-common or @apollo/react-hooks. Both are at 3.0.0. I understand that @apollo/react-hooks is just re-exporting ApolloProvider from @apollo/react-common, that's why I am also confused why this is happening. I will look into it further to see if I can find any more info.

[jackyef]

Apparently the problem was because @apollo/react-hooks has dependency to @apollo/react-common^3.0.0, while my app has dependency to @apollo/[email protected] and @apollo/[email protected]. When a newer version of the package is published, when installing dependencies, I ended up with 2 different version of @apollo/react-common, one inside my app node_modules and the other one inside @apollo/react-hooks/node_modules.

The solution was to follow the dependencies version so there is no duplicates.

tldr:
I changed my package.json deps from:

    "@apollo/react-common": "3.0.0",
    "@apollo/react-components": "3.0.0",
    "@apollo/react-hoc": "3.0.0",
    "@apollo/react-hooks": "3.0.0",
    "@apollo/react-ssr": "3.0.0",
    "@apollo/react-testing": "3.0.0",

to:

    "@apollo/react-common": "^3.0.0",
    "@apollo/react-components": "^3.0.0",
    "@apollo/react-hoc": "^3.0.0",
    "@apollo/react-hooks": "^3.0.0",
    "@apollo/react-ssr": "^3.0.0",
    "@apollo/react-testing": "^3.0.0",

This means users of @apollo/react-* can never set an exact version for these packages. I guess this only happen because I am installing @apollo/react-common directly. Is it not intended that @apollo/react-common could be installed directly?

[Vaneste]

Ok, thanks @Ayc0 & @jackyef !
It reminds me good old DLL hell ;)
I think this issue can be close but at least it may be useful for other beginners ;)

[Ayc0]

@jackyef, yep, that's why I suggested you to check your lockfile

If node cannot use the same version of a package that already exists in node_modules, it will create a subfolder node_modules with this specific version of the package in it

[Ayc0]

That's for this purpose that the resolutions field exists in the package.json

[jackyef]

@Ayc0 Just to clarify, so is the recommended way for installing react-apollo packages is to only install one of them?

Let's say, I only use hooks, so I only install @apollo/react-hooks.
But, if I use HOCs, components and hooks (all three), I should only install @apollo/react-hoc, without the others? Since installing @apollo/react-hoc will also install @apollo/react-hooks, @apollo/react-components and @apollo/react-common through the dependencies chain.

Or, is it okay to install all of them, just don't ever set an exact version for the dependencies?

[Ayc0]

@jackyef you can do whatever you want.

As mentioned here, every package imports the underlying ones.
But, they don't export their content (for instance react-hoc doesn't export the hooks)

So you can do:

• 🥇 set every one of those in the dependencies and set @apollo/react-common in the resolutions (to fix it globally)
  (also maybe the other ones, but as only @apollo/react-common contains the data, it should be fine with mismatching version of the other packages, not sure though...)
• 🥈 set one package in the dependencies and the other ones in peerDependencies (so that you won't re-install them)
• 🥉 just use react-apollo@3 that will export everything
• 🙅‍♂set every one of those in the dependencies and manually check your lock file to ensure that the version that are imported are the right one (most complicated and least resilient solution)

[jackyef]

Alright, I see your point, thanks!

[mplayer78]

I am still having this issue, even though the only react-apollo I have in my package.json is "@apollo/react-hooks": "^3.0.0", my dependencies look like this "dependencies": { "@apollo/react-hooks": "^3.0.0", "graphql": "^14.5.4", "react": "^16.9.0", "react-dom": "^16.9.0", "react-scripts": "3.1.1" },
and in my yarn.lock I only have "@apollo/react-common@^3.1.0":

Is anyone else still having this issue?

[cristiandley]

So the only way to fix this is this way ?

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

<ApolloProvider client={client}>
        <ApolloHooks client={client}>
          <GlobalStyle />
          <Layout />
        </ApolloHooks>
</ApolloProvider>

[Ayc0]

As I already told in a message above: you need to have the same version of @apollo/react-common for every packages
so you should fix in in your resolutions field in the package.json

for instance:

"resolutions": {
  "@apollo/react-common": "3.1.1"
}

[cristiandley]

Seems 3.1.1 is not a version ?

yarn install v1.16.0
[1/5] 🔍  Validating package.json...
[2/5] 🔍  Resolving packages...
Couldn't find any versions for "@apollo/react-common" that matches "3.1.1"
? Please choose a version of "@apollo/react-common" from this list: (Use arrow keys)
❯ 3.1.0 
  3.1.0-beta.0 

Apart from that is not working (w3.1.0)

My deps:

"react": "^16.8.2",
"react-apollo": "^2.1.6",
"@apollo/react-hooks": "^3.1.0",
...
"resolutions": {
    "@apollo/react-common": "3.1.0"
  },

[Ayc0]

Seems 3.1.1 is not a version ?

Yeah, it's the 3.1.0

also my fix only works if you are using the v3 everywhere

in your case, you are using react-apollo v2, which was defining it's own Provider.
upgrade react-apollo to the v3 and it should work (as said here)

[akougblenou]

Hi I think I am having a similar issue.
I am using apollo-client and I wanted to use the hooks in my project so I decided to add @apollo/react-hooks, but the client always comes back as undefined.
Here is an extract of my dependencies

"resolutions": {
    "@apollo/react-common": "3.1.0"
  },
  "dependencies": {
    "@apollo/react-hooks": "^3.1.1",
    "antd": "3.21.4",
    "apollo-cache-inmemory": "^1.6.3",
    "apollo-client": "^2.6.4",
    "apollo-link-http": "^1.5.16",
...

later on my client init looks like this :

import { createHttpLink } from 'apollo-link-http';
import { ApolloClient } from 'apollo-client';

import { InMemoryCache } from 'apollo-cache-inmemory';
import fetch from 'unfetch';
import { GRAPH_QL_URI } from '../constants';

// const httpLink = new HttpLink({
//     uri : GRAPH_QL_URI,
//     fetch,
// });

const httpLink = createHttpLink({ uri : GRAPH_QL_URI, fetch });

export const client = () => new ApolloClient({
    // cache : new InMemoryCache(),
    link : httpLink,
    // uri : GRAPH_QL_URI,
});

Finally I call the ApolloProviderin my index in such way:

const App = () => (
        <Suspense fallback={<></>}>
            <ApolloProvider client={client}>
               // some stuff happening here
            </ApolloProvider>
        </Suspense>
);

ReactDOM.render(<App />, document.querySelector('#root'));

I have added the resolution to react-common but it does not seems to solve the issue at all, I might be missing something else ?

[jackietieu]

Thanks @Ayc0 , I had the same issue and fixed it thanks to your comments. All of the packages were at 3.1.3, but @apollo/react-testing had a peer dependency of @apollo/react-common. Even though it was the same version as the global react-common, it was throwing an error. Uninstalling react-testing, installing react-common, then re-installing react-testing to remove the peer dependency fixed the issue.

[frolovdev]

@jackietieu @akougblenou @Ayc0 @mplayer78 I faced same issue in monorepo

just installing @apollo/react-hooks in package (not root), and it magically works without importing from it (I import only from react-apollo)

I think it's a problem with module resolution or lerna links

[jamestrenda]

yeah none of these fixes worked for me. I'm using the same version of react-common, i'm using v3 for everything and I'm still getting this error.

[Ayc0]

Way to fix it:

• Check in the package.json that each package has the same version as the others
• in you're using yarn, check in yarn.lock, if you're using npm, check in package-lock.json and here check that each package has the same version as the others (like ^3.0.0 can result to the version 3.0.4)
• use the resolutions field of your package.json to pin packages

https://github.com/apollographql/react-apollo/issues/3373#issuecomment-521963695