MockNetworkInterface match mock requests regardless of variable order (…

…#973)

* MockNetworkInterface match regardless of variable order

* update changelog

Changelog.md

@@ -1,6 +1,7 @@
 # Change log
 
 ### vNext
+- MockNetworkInterface match mock requests regardless of variable order [#973](https://github.com/apollographql/react-apollo/pull/973)
 
 ### 1.4.11
 - Replace string refs with callback refs [#908](https://github.com/apollographql/react-apollo/pull/908)

src/test-utils.tsx

@@ -258,9 +258,10 @@ export class MockSubscriptionNetworkInterface extends MockNetworkInterface
 
 function requestToKey(request: ParsedRequest): string {
   const queryString = request.query && print(request.query);
-  return JSON.stringify({
+  const requestKey = {
     variables: request.variables || {},
     debugName: request.debugName,
     query: queryString,
-  });
+  };
+  return JSON.stringify(requestKey, Object.keys(requestKey).sort());
 }

test/react-web/client/graphql/queries/index.test.tsx

@@ -244,6 +244,59 @@ describe('queries', () => {
     );
   });
 
+  it("doesn't care about the order of variables in a request", done => {
+    const query = gql`
+      query people($first: Int, $jedi: Boolean) {
+        allPeople(first: $first, jedi: $jedi) {
+          people {
+            name
+          }
+        }
+      }
+    `;
+    const data = { allPeople: { people: [{ name: 'Luke Skywalker' }] } };
+    const variables = { first: 1, jedi: true };
+    const mocks = [
+      {
+        request: {
+          query,
+          variables,
+        },
+        result: {
+          data,
+        },
+      },
+    ];
+    const networkInterface = mockNetworkInterface.apply(null, mocks);
+    const client = new ApolloClient({ networkInterface, addTypename: false });
+    const options = {
+      options: {
+        variables: {
+          jedi: true,
+          first: 1,
+        },
+      },
+    };
+
+    @graphql(query, options)
+    class Container extends React.Component<any, any> {
+      componentWillReceiveProps(props) {
+        expect(props.data.loading).toBe(false);
+        expect(props.data.allPeople).toEqual(data.allPeople);
+        done();
+      }
+      render() {
+        return null;
+      }
+    }
+
+    renderer.create(
+      <ApolloProvider client={client}>
+        <Container />
+      </ApolloProvider>,
+    );
+  });
+
   it('allows falsy values in the mapped variables from props', done => {
     const query = gql`
       query people($first: Int) {