Improve mismatched query error message

Author: moretti

package-lock.json

@@ -166,7 +166,8 @@
   "dependencies": {
     "apollo-utilities": "^1.2.1",
     "hoist-non-react-statics": "^3.0.0",
-    "lodash.isequal": "^4.5.0",
+    "jest-diff": "^24.5.0",
+    "lodash": "^4.17.11",
     "prop-types": "^15.6.0",
     "ts-invariant": "^0.3.0",
     "tslib": "^1.9.3"

package.json

@@ -8,13 +8,16 @@ import {
 } from 'apollo-link';
 
 import { print } from 'graphql/language/printer';
+import { getOperationAST } from 'graphql';
 import {
   addTypenameToDocument,
   removeClientSetsFromDocument,
   removeConnectionDirectiveFromDocument,
   cloneDeep,
 } from 'apollo-utilities';
-const isEqual = require('lodash.isequal');
+import values from 'lodash/values';
+import isEqual from 'lodash/isEqual';
+import diff from 'jest-diff';
 
 type ResultFunction<T> = () => T;
 
@@ -75,10 +78,18 @@ export class MockLink extends ApolloLink {
     });
 
     if (!response || typeof responseIndex === 'undefined') {
+      const queryDiffs = (<string[]> []).concat(
+        ...values(this.mockedResponsesByKey).map(mockedResponses =>
+          mockedResponses.map(mockedResponse =>
+            diffRequest(mockedResponse.request, operation, this.addTypename),
+          ),
+        ),
+      );
+
       throw new Error(
-        `No more mocked responses for the query: ${print(
-          operation.query,
-        )}, variables: ${JSON.stringify(operation.variables)}`,
+        `No more mocked responses for ${requestToString(operation)}${
+          queryDiffs.length ? `\n\nPossible matches:\n${queryDiffs.join('\n')}` : ''
+        }`,
       );
     }
 
@@ -178,6 +189,32 @@ function requestToKey(request: GraphQLRequest, addTypename: Boolean): string {
   return JSON.stringify(requestKey);
 }
 
+function diffRequest(
+  actualRequest: GraphQLRequest,
+  expectedRequest: GraphQLRequest,
+  addTypename?: Boolean
+): string {
+  return diff(
+    requestToString(actualRequest, addTypename),
+    requestToString(expectedRequest)
+  ) || '';
+}
+
+function requestToString(
+  request: GraphQLRequest,
+  addTypename?: Boolean
+): string {
+  const query = print(
+    addTypename ? addTypenameToDocument(request.query) : request.query
+  );
+  const variables = request.variables
+    ? JSON.stringify(request.variables, null, 2)
+    : '{}';
+  const operationAST = getOperationAST(request.query, null);
+  const operationName = operationAST ? operationAST.operation : 'query';
+  return `${operationName}:\n${query}variables:\n${variables}`;
+}
+
 // Pass in multiple mocked responses, so that you can test flows that end up
 // making multiple queries to the server
 // NOTE: The last arg can optionally be an `addTypename` arg

src/test-links.ts

@@ -15,33 +15,100 @@ Object {
 `;
 
 exports[`errors if the query in the mock and component do not match 1`] = `
-[Error: Network error: No more mocked responses for the query: query GetUser($username: String!) {
+[Error: Network error: No more mocked responses for query:
+query GetUser($username: String!) {
   user(username: $username) {
     id
     __typename
   }
 }
-, variables: {"username":"mock_username"}]
+variables:
+{
+  "username": "mock_username"
+}
+
+Possible matches:
+- Expected
++ Received
+
+  query:
+- query OtherQuery {
+-   otherQuery {
++ query GetUser($username: String!) {
++   user(username: $username) {
+      id
+      __typename
+    }
+  }
+  variables:
+  {
+    "username": "mock_username"
+  }]
 `;
 
 exports[`errors if the variables do not deep equal 1`] = `
-[Error: Network error: No more mocked responses for the query: query GetUser($username: String!) {
+[Error: Network error: No more mocked responses for query:
+query GetUser($username: String!) {
   user(username: $username) {
     id
     __typename
   }
 }
-, variables: {"username":"some_user","age":42}]
+variables:
+{
+  "username": "some_user",
+  "age": 42
+}
+
+Possible matches:
+- Expected
++ Received
+
+  query:
+  query GetUser($username: String!) {
+    user(username: $username) {
+      id
+      __typename
+    }
+  }
+  variables:
+  {
+-   "age": 13,
+-   "username": "some_user"
++   "username": "some_user",
++   "age": 42
+  }]
 `;
 
 exports[`errors if the variables in the mock and component do not match 1`] = `
-[Error: Network error: No more mocked responses for the query: query GetUser($username: String!) {
+[Error: Network error: No more mocked responses for query:
+query GetUser($username: String!) {
   user(username: $username) {
     id
     __typename
   }
 }
-, variables: {"username":"other_user"}]
+variables:
+{
+  "username": "other_user"
+}
+
+Possible matches:
+- Expected
++ Received
+
+  query:
+  query GetUser($username: String!) {
+    user(username: $username) {
+      id
+      __typename
+    }
+  }
+  variables:
+  {
+-   "username": "mock_username"
++   "username": "other_user"
+  }]
 `;
 
 exports[`mocks the data 1`] = `