Apollo-client: MockedProvider doesn't match queries with @client directive

[adamyonk]

I'm not sure that this ever worked, because this is the first time that I've tried using MockedProvider with the @client directive, but it seems off.

Intended outcome:
Passing mocks to MockedProvider having the @client directive should match like regular queries.

Actual outcome:
No more mocked responses for the query: QUERY

How to reproduce the issue:
Just try to mock a query having the @client directive.

Versions

  System:
    OS: macOS 10.14.2
  Binaries:
    Node: 8.11.3 - ~/.nvm/versions/node/v8.11.3/bin/node
    Yarn: 1.7.0 - /usr/local/bin/yarn
    npm: 6.5.0 - ~/.nvm/versions/node/v8.11.3/bin/npm
  Browsers:
    Chrome: 71.0.3578.98
    Firefox: 63.0
    Safari: 12.0.2
  npmPackages:
    apollo-cache-inmemory: 1.3.12 => 1.3.12
    apollo-client: 2.5.0-alpha.10 => 2.5.0-alpha.10
    apollo-link: 1.2.6 => 1.2.6
    apollo-link-error: 1.1.5 => 1.1.5
    apollo-link-http: 1.5.9 => 1.5.9
    react-apollo: 2.2.4 => 2.2.4

[hwillson]

@adamyonk Can you make sure you're using react-apollo@alpha? It includes the necessary MockedProvider changes.

[adamyonk]

Do I need to also upgrade some of the other apollo deps? [email protected] fails tests using MockedProvider with:

    TypeError: apolloUtilities.removeClientSetsFromDocument is not a function

And [email protected] fails install with:

❯ npm i -D [email protected]

> [email protected] postinstall /Users/adam/Code/studio-app-store/node_modules/react-apollo
> rimraf ./node_modules/enzyme-adapter-react-16/build/ReactSixteenAdapter.js && cp ./scripts/ReactSixteenAdapter.js ./node_modules/enzyme-adapter-react-16/build/

cp: directory ./node_modules/enzyme-adapter-react-16/build does not exist
npm WARN [email protected] requires a peer of apollo-client@^2.2.3 but none is installed. You must install peer dependencies yourself.

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] postinstall: `rimraf ./node_modules/enzyme-adapter-react-16/build/ReactSixteenAdapter.js && cp ./scripts/ReactSixteenAdapter.js ./node_modules/enzyme-adapter-react-16/build/`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/adam/.npm/_logs/2019-01-18T16_39_20_656Z-debug.log

[hwillson]

Interesting @adamyonk - can you try:

apollo-client@alpha (2.5.0-alpha.10)
react-apollo@alpha (2.4.0-alpha.3)
apollo-cache-inmemory@alpha (1.4.0-alpha.12)

[adamyonk]

OK, with these deps:

    apollo-cache-inmemory: 1.4.0-alpha.12 => 1.4.0-alpha.12
    apollo-client: 2.5.0-alpha.10 => 2.5.0-alpha.10
    apollo-link: 1.2.6 => 1.2.6
    apollo-link-error: 1.1.5 => 1.1.5
    apollo-link-http: 1.5.9 => 1.5.9
    react-apollo: 2.4.0-alpha.3 => 2.4.0-alpha.3

I'm still getting the utilities error:

    TypeError: apolloUtilities.removeClientSetsFromDocument is not a function

[hwillson]

Thanks @adamyonk - would you mind also posting the result of running npm ls apollo-utilities?

[adamyonk]

Sure!

❯ npm ls apollo-utilities
@invisionapp/[email protected] /Users/adam/Code/studio-app-store
├─┬ [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected]
│ └── [email protected]
├─┬ [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected]  deduped
│ └── [email protected]
└─┬ [email protected]
  └── [email protected]

[hwillson]

Great - thanks! Okay, I'm working on re-creating this and will post back with a solution shortly. For some reason React Apollo's test-utils file isn't pulling in the right version of apollo-utilities. As a workaround, if you were to npm install apollo-utilities@alpha, then that would probably work. But that's far from ideal - you shouldn't have to install the utilities yourself. I'll have a fix ready shortly.

[adamyonk]

OK, makes sense. I can confirm that installing [email protected] does correct the issue I was seeing. 👍

[adamyonk]

Alright, I got back to an issue with MockedProvider, and queries using a "top-level" @client directive, I realized that that is actually a part of the react-apollo package though, should I move that issue over to there?

[hwillson]

Let's track this issue here @adamyonk. In the alpha's, @client fields are ignored when using MockedProvider. This is because MockedProvider uses mock Apollo Links to fake the query request/response cycle, and @client based fields are stripped before being sent through the link (since they're now handled by Apollo Client itself). I'll put some thought into how we can address this, and post back shortly. Thanks!

[adamyonk]

Aha, OK! That matches my experience. A little more info to be explicit - for a query like this:

people @client {
  id
  name
}

Adding an error to the mock doesn't cause an error to fire, and adding a result.data to the mock doesn't result in the data making it into the query being mocked.

Thanks so much for the info and quick responses, Hugh!

[jrr]

Would this also affect using addMockFunctionsToSchema and a SchemaLink instead of MockedProvider?

We were previously mocking local queries alongside server queries, and the local mocks seem to have stopped working with the move from apollo-link-state to 2.5's integrated local state handling.

Is this the same issue? Shall I file another?

[hwillson]

@jrr Sounds like a separate issue - if you could open a new issue for this, that would be great.

[splybon]

HI I wanted to add to this an issue I'm having.
I just upgraded to react-apollo 3.0.1 and @apollo/react-testing 3.0.1.

I also had to add "apollo-utilities": "^1.3.2" to my package.json in order to not get the error
[TypeError: (0 , _apolloUtilities.removeClientSetsFromDocument) is not a function]

[pdemarino]

Also see #4520

[hwillson]

Please try a recent version of @apollo/client and let us know if this issue is still happening. Thanks!

[yurasid]

@hwillson
Hello, just experienced this issue with @apollo/[email protected].
I used MockedProvider from @apollo/client/testing

const Q = gql`
  query Users($page: Int) {
    users(page: $page) @client {
      data {
        id
        name
      }
      page
    }
  }

without @client everything is ok.

[coler-j]

@yurasid is this still happening? Wondering if we should upgrade to V3 if the same instability exists.