Stripped @connection directive breaks MockedProvider

Intended outcome: I have a test that uses a MockedProvider to test a given GraphQL query. This test was running smoothly with apollo@1.9.1, but broke once we migrated to 2.0.2. This is the query we are testing:

query WidgetData($id: ID!, $parameter: JSON) {
    widgetData(id: $id, parameter: $parameter) @connection(key: $id)
}

Actual outcome: We get this error: Error: Network error: No more mocked responses for the query: query WidgetData($id: ID!, $parameter: JSON) { widgetData(id: $id, parameter: $parameter) }, variables: {"id":"id1"}]

As it turns out, the problem is that the mocked response is saved under the key

'{"query":"query WidgetData($id: ID!, $parameter: JSON) {\n  widgetData(id: $id, parameter: $parameter) @connection(key: $id)\n}\n","variables":{}}'

while it is retrieved under the slightly different key:

 '{"query":"query WidgetData($id: ID!, $parameter: JSON) {\n  widgetData(id: $id, parameter: $parameter)\n}\n","variables":{}}'

So the @connection(key: $id) directive is stripped in the second line, which results in the mock data not being returned correctly.

After lots of debugging, we found the culprit to be this change, where the connect directive is deliberately stripped out: https://github.com/apollographql/apollo-client/pull/2375/files#diff-fde964badaf130f363bd0d1f7bc71b26R121

Version

• apollo-client@2.0.2
• react-apollo@2.0.0

[lewisl9029]

Unfortunately, I was able to repro this issue using apollo-client 2.3.5 and react-apollo 2.1.8. apollo-link is likely stripping the connection directive as expected, but as far as I can see, nothing in MockedLink appears to be stripping the connection directive in the user provided queries in MockedProvider’s mocks prop, so the queries won’t match exactly: https://github.com/apollographql/react-apollo/blob/master/src/test-links.ts#L40

I can open a PR to address this for the @connection directive since it’s likely just a matter of calling removeConnectionDirectiveFromDocument from apollo-utilities in addMockedResponse: https://github.com/apollographql/react-apollo/blob/master/src/test-links.ts#L46

But I’m not sure yet what it’d take to generalize this to other client side directives, or if this is even necessary for any other directive?

[htulipe]

From what I can tell, it is fixed in client 2.5