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]

I had to make sure all of my libraries were on 3.1.2 and then I also followed @WhoAteDaCake and added the Provider from react-apollo as well as the one from @apollo/react-common. The weird thing was that I wasn't getting this error when running on my Mac, only when I was running under Docker or within bitbucket-pipelines.

[onebigdoor]

i'm trying to integrate Jest into my project for the first time. i'm seeing this invariant violation with "@apollo/react-testing": "3.1.2", "react-apollo "3.1.2"

[fernandopasik]

I've experienced this problem in a monorepo with yarn. An internal package that had another internal package as dependency had problems with react-apollo, even as a peerDependency and devDependency. In the end I removed it from all, which is not as it should be, but it was the only way to move forward for now.

[codler]

Still an issue in latest

"@apollo/react-hooks": "^3.1.2",
"@apollo/react-testing": "^3.1.2",
"apollo-boost": "^0.4.4",

Is this going to be fixed??

[fernandopasik]

@codler are you including the react-apollo package as well? It would be interesting to confirm if people not using the package that includes everything has same problems

[fernandopasik]

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.

@adamjarling were you including react-apollo package before?

[codler]

@codler are you including the react-apollo package as well? It would be interesting to confirm if people not using the package that includes everything has same problems

@fernandopasik No im not using react-apollo

[brense]

I had the same error when upgrading to @apollo/react-hooks. I noticed I was still using a <Query /> component from react-apollo, after changing that to a useQuery, the error was gone. If you want to use both hooks and components, I think you will have to make sure you use both providers.

[jgfidelis]

Still getting the same issue in 3.1.2. I've tried everything in this thread.

I have: react-apollo@3.1.2 and @apollo/react-testing@3.1.2.

Anyone have any more ideas?

My app is only using useQuery, importing it from 'react-apollo'.

[fernandopasik]

This seems to be happening quite random in all 3.x.x versions

[fernandopasik]

@hwillson is there any idea on how to workaround this issue?

[SeanRoberts]

Using two ApolloProviders (one from react-apollo and one from @apollo/react-common) seemed to solve the problem for me. All of my react-apollo and the @apollo/react-* projects are all pegged to 3.1.2 for me.

[fernandopasik]

I don't use react-apollo anymore, I install individually the parts needed.

What I observed about this issue is that CI randomly fails depending on how the dependencies are installed.

Wouldn't there be a problem with the way all libraries are interconnected?

[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