Parse document at all times

We always parse the document now when we receive a string.
This ensures a consistent request data structure and makes
things easier, since there's not much else to expect.

Also addresses a bug where `parse` is undefined.

Fix #206

package.json

@@ -114,6 +114,7 @@
     "@types/fast-json-stable-stringify": "^2.0.0",
     "create-react-context": "^0.2.3",
     "fast-json-stable-stringify": "^2.0.0",
+    "graphql-tag": "^2.10.1",
     "prop-types": "^15.6.0",
     "wonka": "^2.0.1"
   }

src/client.test.ts

@@ -1,4 +1,5 @@
-import { parse, print } from 'graphql';
+import { print } from 'graphql';
+import gql from 'graphql-tag';
 
 /** NOTE: Testing in this file is designed to test both the client and it's interaction with default Exchanges */
 
@@ -24,7 +25,13 @@ describe('createClient', () => {
 
 const query = {
   key: 1,
-  query: `{ todos { id } }`,
+  query: gql`
+    {
+      todos {
+        id
+      }
+    }
+  `,
   variables: { example: 1234 },
 };
 
@@ -66,7 +73,7 @@ describe('executeQuery', () => {
     );
 
     const receivedQuery = receivedOps[0].query;
-    expect(print(receivedQuery)).toBe(print(parse(query.query)));
+    expect(print(receivedQuery)).toBe(print(query.query));
   });
 
   it('passes variables type to exchange', () => {
@@ -105,7 +112,7 @@ describe('executeMutation', () => {
     );
 
     const receivedQuery = receivedOps[0].query;
-    expect(print(receivedQuery)).toBe(print(parse(query.query)));
+    expect(print(receivedQuery)).toBe(print(query.query));
   });
 
   it('passes variables type to exchange', () => {
@@ -144,7 +151,7 @@ describe('executeSubscription', () => {
     );
 
     const receivedQuery = receivedOps[0].query;
-    expect(print(receivedQuery)).toBe(print(parse(query.query)));
+    expect(print(receivedQuery)).toBe(print(query.query));
   });
 
   it('passes variables type to exchange', () => {

src/client.ts

@@ -1,5 +1,3 @@
-import { parse } from 'graphql';
-
 import {
   filter,
   makeSubject,
@@ -101,7 +99,7 @@ export class Client {
     opts?: Partial<OperationContext>
   ): Operation => ({
     key,
-    query: typeof query === 'string' ? parse(query) : query,
+    query,
     variables,
     operationName: type,
     context: this.createOperationContext(opts),

src/components/Mutation.test.tsx

@@ -10,15 +10,19 @@ jest.mock('../context', () => {
 });
 
 import { mount } from 'enzyme';
+import { print } from 'graphql';
+import gql from 'graphql-tag';
 import React from 'react';
 import { fromValue } from 'wonka';
+
 // @ts-ignore - client is exclusively from mock
 import { client } from '../context';
 import { Mutation } from './Mutation';
 
 const props = {
-  query: 'examplequery',
+  query: 'mutation Example { example }',
 };
+
 let childProps: any;
 
 const childMock = (c: any) => {
@@ -59,10 +63,9 @@ describe('execute mutation', () => {
   it('calls executeMutation with query', () => {
     mountWrapper(props);
     childProps.executeMutation();
-    expect(client.executeMutation.mock.calls[0][0]).toHaveProperty(
-      'query',
-      props.query
-    );
+
+    const call = client.executeMutation.mock.calls[0][0];
+    expect(print(call.query)).toBe(print(gql([props.query])));
   });
 
   it('calls executeMutation with variables', () => {

src/components/Query.test.tsx

@@ -17,7 +17,7 @@ import { client } from '../context';
 import { Query } from './Query';
 
 const props = {
-  query: 'examplequery',
+  query: '{ example }',
 };
 let childProps: any;
 
@@ -64,7 +64,7 @@ describe('on change', () => {
     const wrapper = mountWrapper(props);
 
     // @ts-ignore
-    wrapper.setProps({ ...props, query: 'new query' });
+    wrapper.setProps({ ...props, query: '{ newQuery }' });
     expect(client.executeQuery).toBeCalledTimes(2);
   });
 });