Apollo-client: Stripped @connection directive breaks MockedProvider

[tzimmermann]

Intended outcome:
I have a test that uses a MockedProvider to test a given GraphQL query. This test was running smoothly with [email protected], 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

• [email protected]
• [email protected]

[jbaxleyiii]

@tzimmermann interesting! We strip @connection because it is a client side only directive, but the MockedProvider should do the same 👍

I'll take a look! Thanks for the issue report

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions to Apollo Client!

[tzimmermann]

@jbaxleyiii Any updates on this issue? Is there anything I can do to help?

[hwillson]

This should no longer be an issue when using a modern version of apollo-client (2.3.2). AC now strips the @connection directive using apollo-link, and this happens for both real code as well as the MockLink used by MockedProvider. Thanks!

[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?

[marvinkome]

Have this been fixed? still doesn't work here

[riccoski]

I'm also still getting this issue :( just upgraded all the apollo packages

[NatPri]

I'm able to repro with [email protected] and [email protected]. I haven't tried with latest, but given the non-response here, I suspect that it's still an issue there.

[lesreaper]

Still having this issue as well. Any progress?

[htulipe]

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