Upgrading to 3.0.1 gives the following: Invariant violation: Could not find "client"

[dillonwelch]

Intended outcome:

All my tests pass when I upgrade to react-apollo 3.0.1 and @apollo/react-testing 3.0.1.

Actual outcome:

I get the following error: 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

How to reproduce the issue:

Not quite sure but here's how I have my tests setup:

  <MockedProvider mocks={mocks} addTypename={false}>
    {component}
  </MockedProvider>

Version

  System:
    OS: macOS 10.14.5
  Binaries:
    Node: 12.1.0 - /usr/local/bin/node
    Yarn: 1.16.0 - /usr/local/bin/yarn
    npm: 6.9.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 76.0.3809.100
    Safari: 12.1.1
  npmPackages:
    apollo-cache-inmemory: ^1.6.3 => 1.6.3 
    apollo-client: ^2.6.4 => 2.6.4 
    apollo-link: ^1.2.12 => 1.2.12 
    apollo-link-batch-http: ^1.2.12 => 1.2.12 
    apollo-link-context: ^1.0.18 => 1.0.18 
    apollo-link-error: ^1.1.11 => 1.1.11 
    apollo-link-http: ^1.5.15 => 1.5.15 
    apollo-utilities: ^1.3.2 => 1.3.2 
    react-apollo: ^3.0.1 => 3.0.1

[MitchK]

I have the same issue. I just got started with apollo testing. Using versions:

    "react-apollo": "^3.0.0",
     ...
    "@apollo/react-testing": "^3.0.1",

This is how I use the MockProvider

        <MockedProvider mocks={mocks} addTypename={false}>
          <MessagesList
            {...props}
          />
        </MockedProvider>

This is the error:

    console.error node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9215
      The above error occurred in the <Query> component:
          in Query (created by MessagesList)
          in RCTSafeAreaView (created by _class)
          in _class (created by SafeAreaView)
          in SafeAreaView (created by MessagesList)
          in MessagesList
          in ApolloProvider (created by MockedProvider)
          in MockedProvider
      
      Consider adding an error boundary to your tree to customize error handling behavior.
      Visit https://fb.me/react-error-boundaries to learn more about error boundaries.

  ● MessageList › snapshot test

    Invariant Violation: Could not find "client" in the context or passed in as an option. Wrap the root component in an <ApolloPro
vider>, or pass an ApolloClient instance in via options.

      at new InvariantError (node_modules/ts-invariant/lib/invariant.esm.js:12:28)
      at invariant (node_modules/ts-invariant/lib/invariant.esm.js:24:15)
      at QueryData.OperationData.refreshClient (node_modules/@apollo/react-hooks/lib/react-hooks.cjs.js:56:115)
      at QueryData.execute (node_modules/@apollo/react-hooks/lib/react-hooks.cjs.js:115:10)
      at node_modules/@apollo/react-hooks/lib/react-hooks.cjs.js:476:55
      at useDeepMemo (node_modules/@apollo/react-hooks/lib/react-hooks.cjs.js:432:14)
      at useBaseQuery (node_modules/@apollo/react-hooks/lib/react-hooks.cjs.js:475:16)
      at useQuery (node_modules/@apollo/react-hooks/lib/react-hooks.cjs.js:492:10)
      at Query (node_modules/@apollo/react-components/lib/react-components.cjs.js:26:41)
      at renderWithHooks (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:5036:18)

[MitchK]

Downgrading to 3.0.0 did the trick for me as a temporary fix:

yarn add @apollo/react-testing@3.0.0 --dev

[hourliert]

It looks like Apollo/react-testing is using an old version of Apollo/react-common. (0.1.0-beta) which instantiate its own Apollo context.
Other most recent libraries (like apollo/react-hook) use another version (3.0.0-beta) which also instantiate an Apollo context.

[benox3]

In my case, I found that I had react-apollo@3.0.1 installed as well as @apollo/react-hooks@3.0.0. 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

[dorianamouroux]

I had the same issue. After I upgraded react-apollo and the testing utilities to the same version (3.0.1), I regenerated my package-lock.json and it fixed it.

[dillonwelch]

Everything is at 3.0.1 in my package-lock.json unfortunately.

[jkb-kt]

Same issue. Using only "@apollo/react-hooks": "^3.0.1" and "apollo-boost": "^0.4.4".

[cburbank]

I'm seeing this as well, even after rolling back to "@apollo/react-testing": "^3.0.0" and "@apollo/react-hooks": "^3.0.0".

[brendangibson]

Any resolution?

[mplayer78]

I'm having the same issue without any testing. I have ensured that I am only using "@apollo/react-hooks", perhaps interestingly in my package.json "@apollo/react-hooks": "^3.0.0" whereas in node-modules both react-common & react-hooks are "version": "3.1.0",

[c10b10]

I'm having this issue as well, not only with tests.

[mplayer78]

Are you definitely using hooks in every component that calls a mutation or query. Mine is now working, not exactly sure why but I think that there was a component which was still using a render prop somewhere in the tree.

[hwillson]

Is anyone here still encountering this issue, using the 3.1.0 versions of all packages?

[shadrech]

So my problem is that I have no data coming through. Not sure what I'm doing wrong. My test file: https://github.com/shadrech/state-management-react-apollo/blob/tests/app/src/components/WorkerList/index.test.jsx
As you can see I console.log data in https://github.com/shadrech/state-management-react-apollo/blob/tests/app/src/components/WorkerList/index.jsx and its always coming up with undefined. Not sure if the issue is related

Both @apollo/react-hooks and @apollo/react-testing are at v3.1.1

[elrumordelaluz]

Same here as what @shadrech comment (probably not related in this specific issue and we have to open a new one):

data is always undefined

after upgrade into v3.1

[shadrech]

The error I get is No more mocked responses for the query

[clewott]

@hwillson I just updated all of mine to 3.1.0 and am no longer experiencing that issue.

[jack5241027]

I update all @apollo/react-* that I used, to the same version 3.1.1, and no longer experience this issue too.

[aej11a]

@hwillson I'm using 3.1.1 on everything, for sure, and facing this issue. I tried downgrading to 3.0 and re-upgrading to 3.1.1 and that seemed to work once, but as soon as I restarted my project, got the same error again

EDIT: Not seeing the issue anymore. Will update if it returns.

[PatrickLambert1101]

Ive also tried downgrading and upgrading to "@apollo/react-hooks": "^3.1.1",
"@apollo/react-testing": "^3.1.1",,

Getting the error

[YEriin]

3.1.1, still the same issue

[shadrech]

Same here as what @shadrech comment (probably not related in this specific issue and we have to open a new one):

data is always undefined

after upgrade into v3.1

Did you open new issue @elrumordelaluz?

[elrumordelaluz]

Did you open new issue @elrumordelaluz?

Hey @shadrech, thanks for asking and I'm sorry that I didn't post before what I found.

In my specific case I found the problem comes from @client queries that returned data shaped differently, so need to add returnPartialData prop added some minor versions back.

[shadrech]

Nice. My edge case was importing graphql files. I used parcel bundler for my app, with it I could easily do import query from "../query.graphql", but for jest this didn't work. My solution was to add the babel-plugin-import-graphql plugin to my .babelrc to enable jest to import graphql files the same way

[boxgames1]

Use import { MockedProvider } from 'react-apollo/test-utils';

instead of

import { MockedProvider } from '@apollo/react-testing';

works fine.

Lib version: react-apollo": "^2.1.3

[adamjarling]

I had the same issue and upgrading to:

"@apollo/react-hooks": "^3.1.1",
"@apollo/react-testing": "^3.1.1",

fixed the Invariant client message error on my end.

[kakadiadarpan]

Facing weird issues with MockedProvider:

When I use the following versions, my tests (jest) break:

"@apollo/react-testing": "3.1.1",
"react-apollo "3.1.1",

When I use the following version, my storybook starts breaking:

"@apollo/react-testing": "3.1.0",
"react-apollo "3.1.0",

[WhoAteDaCake]

Library that I use has react-apollo@3.1.1 as a peer dependency. When the same library calls

import { useApolloClient } from 'react-apollo';

It breaks on invariant. However, when I call it from my code it works fine.

EDIT:
As a temporary solution, I've added

export { ApolloProvider } from 'react-apollo';

To the library. Now I am using 2 ApolloProviders, which seems to make it work, but it's a very dodgy solution

[balnagy]

I get the same error in production code, not in tests. Trying to upgrade from ^2.5.1 to ^3.1.0.

[SeanRoberts]

Yes, I also had stopped using react-apollo! I had to add it back to get things to work. I also found this error was very inconsistent. It worked for me in development on my mac, and it worked for me in production if I built on my mac, but if I ran it in CI, or in a docker container, or on a Linux machine it would throw the error.

The way I have it set up now seems very backwards but everything is working until a proper fix is released.

[acrogenesis]

@SeanRoberts would you mind sharing more details into how you’ve managed to solve this issue.

[SeanRoberts]

@acrogenesis

In App.tsx

import { ApolloProvider } from '@apollo/react-common';
import { ApolloProvider as LegacyApolloProvider } from 'react-apollo';
import createApolloClient from './createApolloClient';

const apolloClient = createApolloClient();

export default class App extends React.Component {
  render() {
    return (
        <ApolloProvider client={apolloClient}>
          <LegacyApolloProvider client={apolloClient}>
            <MyStuff />
          </LegacyApolloProvider>
        </ApolloProvider>
    );
  }
}

In package.json

"dependencies": {
    "@apollo/react-common": "^3.1.2",
    "@apollo/react-components": "^3.1.2",
    "@apollo/react-hooks": "^3.1.2",
    "@apollo/react-testing": "^3.1.2",
    "react-apollo": "^3.1.2"
}

Edit: I have no idea why this works, I just know that it works for me!

[losheredos]

@SeanRoberts worked for me!

[nearbycoder]

After further investigation we were able to solve the problem by moving away from using react-apollo imports and just importing from the individual libraries @apollo/react-common, @apollo/react-components, @apollo/react-hooks.

Once all imports were updated the MockProvider from @apollo/react-testing worked correctly.

[frolovdev]

@nearbycoder @SeanRoberts @acrogenesis @fernandopasik @jgfidelis @brense 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

[brense]

@Whispers12 might also be that you need to delete your node_modules directory and do npm install again if you play with your dependencies like that?

[frolovdev]

@brense no, unfortunately it doesn't work (I tried), I think a real problem in this, that Lerna symlinks packages wrong way, but it's hypothesis. I just wrote what suites to my case, cause every other solutions in issues don't fit at all

[andreasonny83]

For some reason, adding react-test-renderer to my devDependencies fixed the problem

[lr-mjaouen]

@Whispers12 indeed apparently an issue with @apollo/react-hooks and in my case yarn workspaces instead of lerna (but a symlinks issue certainly as you said). Opposite way: I must declare it in the root dependencies (nohoist options doesn't work neither) in order to make it work. Otherwise it's not hoisted & it fails.

[terrygreen0606]

Still the same issue goes here. I am only using hooks in my project with the version of 3.1.3 of @apollo/react-hooks.

Any solutions with this only?

[frolovdev]

I have a solution, that works for me in 100% cases. I use @apollo/react-hooks Copy source code from mockedProvider and change ApolloProvider from @apollo/react-common to

import {ApolloProvider} from "@apollo/react-hooks"

and reimplement MockedProvider by myself

[tony-ho]

I encountered the same issue with @apollo/react-hooks and @apollo/react-testing.

Forcing both packages to the same exact version in package.json resolved it for me ie. I removed the ^ allowing compatible versions. eg.

    "@apollo/react-hooks": "3.1.3",
    "@apollo/react-testing": "3.1.3",

[spawnia]

This error has to do with the switch to the new Context API introduced in React 16.3.

In my case, i passed a component containing an Apollo <Query /> to an external library. That library rendered my component in a React.Portal without passing the Context correctly. Upgrading the library fixed the issue i had. This mishandling of Context will not happen for everyone, which is why not too many people have this issue.

The incompatible context API could also explain why the workaround proposed by #3381 (comment) works.

@hwillson do you think it is feasible to add a compatiblity layer to the ApolloProvider that also passes the client through the legacy Context API? That will smooth over the transition as long as React 16 is still around.

[jessevdp]

I just tried the following combination (both at 3.1.4) but this did not work.

"@apollo/react-hooks": "3.1.4",
"@apollo/react-testing": "3.1.4",

Instead going with both at 3.1.3, as @tony-ho suggested, seems to work!

"@apollo/react-hooks": "3.1.3",
"@apollo/react-testing": "3.1.3",

[ianlizzo]

This error has to do with the switch to the new Context API introduced in React 16.3.

In my case, i passed a component containing an Apollo <Query /> to an external library. That library rendered my component in a React.Portal without passing the Context correctly. Upgrading the library fixed the issue i had. This mishandling of Context will not happen for everyone, which is why not too many people have this issue.

The incompatible context API could also explain why the workaround proposed by #3381 (comment) works.

@hwillson do you think it is feasible to add a compatiblity layer to the ApolloProvider that also passes the client through the legacy Context API? That will smooth over the transition as long as React 16 is still around.

Any idea on when this might be fixed?

[ekasbohm]

Updating to

"@apollo/react-hooks": "^3.1.5",
"@apollo/react-testing": "^3.1.4",

resolved this for me.

[ayubov]

Faced the same issue. For me it was resolved by adding an alias to webpack's config:

'@apollo/react-hooks': path.resolve('node_modules/@apollo/react-hooks')

Looks like the problem happens because of different instances of the library.

[bailycase99]

Just want to chime in here and say that I fixed this by downgrading both of the following packages:

"@apollo/react-hooks": "3.1.3", "@apollo/react-testing": "3.1.3",

This really should be more apparent. I am using React Testing Library with Jest. Hope this helps someone!

[dennisja]

Regenerating the lock file e.g yarn.lock if you are using yarn or package-lock.json for npm works as well

[gabrr]

Guys I was using ReactDOM.render() but when I did that I didn't pass the apollo provider, then I got the same error as everyone. Since I put it is working fine. :)

[hugohow]

I had the same issue, but because i put @apollo/react-testing in devDepencies instead of dependencies

[milan-mnf]

I had this issue because of mixed use of import { useMutation } from "react-apollo-hooks"; and import { useMutation } from "@apollo/react-hooks";. Switching everything to the latter fixed the issue.