Merge pull request #221 from FormidableLabs/fix/always-parse-doc

Change GraphQLRequest to always contain a parsed document

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/Mutation.tsx

@@ -1,13 +1,14 @@
+import { DocumentNode } from 'graphql';
 import React, { Component, FC, ReactNode } from 'react';
 import { pipe, toPromise } from 'wonka';
 import { Client } from '../client';
 import { Consumer } from '../context';
-import { GraphQLRequest, OperationResult } from '../types';
+import { Omit, OperationResult } from '../types';
 import { CombinedError, createRequest } from '../utils';
 
 interface MutationHandlerProps {
   client: Client;
-  query: GraphQLRequest['query'];
+  query: string | DocumentNode;
   children: (arg: MutationChildProps) => ReactNode;
 }
 
@@ -66,7 +67,7 @@ class MutationHandler extends Component<
   };
 }
 
-type MutationProps = Exclude<MutationHandlerProps, 'client'>;
+type MutationProps = Omit<MutationHandlerProps, 'client'>;
 
 export const Mutation: FC<MutationProps> = props => (
   <Consumer>

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);
   });
 });

src/components/Query.tsx

@@ -1,11 +1,14 @@
+import { DocumentNode } from 'graphql';
 import React, { Component, FC, ReactNode } from 'react';
 import { pipe, subscribe } from 'wonka';
 import { Client } from '../client';
 import { Consumer } from '../context';
-import { GraphQLRequest, OperationContext, RequestPolicy } from '../types';
+import { Omit, OperationContext, RequestPolicy } from '../types';
 import { CombinedError, createRequest, noop } from '../utils';
 
-interface QueryHandlerProps extends Omit<GraphQLRequest, 'key'> {
+interface QueryHandlerProps {
+  query: string | DocumentNode;
+  variables?: object;
   client: Client;
   requestPolicy?: RequestPolicy;
   children: (arg: QueryHandlerState) => ReactNode;

src/components/Subscription.tsx

@@ -1,11 +1,14 @@
+import { DocumentNode } from 'graphql';
 import React, { Component, FC, ReactNode } from 'react';
 import { pipe, subscribe } from 'wonka';
 import { Client } from '../client';
 import { Consumer } from '../context';
-import { GraphQLRequest } from '../types';
+import { Omit } from '../types';
 import { CombinedError, createRequest, noop } from '../utils';
 
-interface SubscriptionHandlerProps extends GraphQLRequest {
+interface SubscriptionHandlerProps {
+  query: string | DocumentNode;
+  variables?: object;
   client: Client;
   handler?: (prev: any | void, data: any) => any;
   children: (arg: SubscriptionHandlerState) => ReactNode;
@@ -70,7 +73,7 @@ class SubscriptionHandler extends Component<
   }
 }
 
-type SubscriptionProps = Exclude<SubscriptionHandlerProps, 'client'>;
+type SubscriptionProps = Omit<SubscriptionHandlerProps, 'client'>;
 
 export const Subscription: FC<SubscriptionProps> = props => (
   <Consumer>