implement conversion for useHTTPGetForQueries

src/client.ts

@@ -66,6 +66,8 @@ export interface ClientOptions {
   suspense?: boolean;
   /** The default request policy for requests. */
   requestPolicy?: RequestPolicy;
+  /** Use HTTP GET for queries. */
+  preferGetMethod?: boolean;
 }
 
 interface ActiveOperations {
@@ -82,6 +84,7 @@ export class Client {
   fetchOptions?: RequestInit | (() => RequestInit);
   exchange: Exchange;
   suspense: boolean;
+  preferGetMethod: boolean;
   requestPolicy: RequestPolicy;
 
   // These are internals to be used to keep track of operations
@@ -99,6 +102,7 @@ export class Client {
     this.fetch = opts.fetch;
     this.suspense = !!opts.suspense;
     this.requestPolicy = opts.requestPolicy || 'cache-first';
+    this.preferGetMethod = !!opts.preferGetMethod;
 
     // This subject forms the input of operations; executeOperation may be
     // called to dispatch a new operation on the subject

src/exchanges/fetch.test.ts

@@ -2,7 +2,8 @@ import { empty, fromValue, pipe, Source, subscribe, toPromise } from 'wonka';
 import { Client } from '../client';
 import { queryOperation } from '../test-utils';
 import { OperationResult, OperationType } from '../types';
-import { fetchExchange } from './fetch';
+import { fetchExchange, convertToGet } from './fetch';
+import gql from 'graphql-tag';
 
 const fetch = (global as any).fetch as jest.Mock;
 const abort = jest.fn();
@@ -151,3 +152,38 @@ describe('on teardown', () => {
     expect(abort).toHaveBeenCalledTimes(0);
   });
 });
+
+describe('convert for GET', () => {
+  it('should do a basic conversion', () => {
+    const query = `query ($id: ID!) { node(id: $id) { id } }`;
+    const variables = { id: 2 };
+    expect(convertToGet('http://localhost:3000', { query, variables })).toBe(
+      `http://localhost:3000?query=${encodeURIComponent(
+        query
+      )}&variables=${encodeURIComponent(JSON.stringify(variables))}`
+    );
+  });
+
+  it('should do a basic conversion with fragments', () => {
+    const nodeFragment = gql`
+      fragment nodeFragment on Node {
+        id
+      }
+    `;
+    const variables = { id: 2 };
+    const query = gql`
+      query($id: ID!) {
+        node(id: $id) {
+          ...nodeFragment
+        }
+      }
+      ${nodeFragment}
+    `;
+
+    expect(convertToGet('http://localhost:3000', { query, variables })).toBe(
+      `http://localhost:3000?query=${encodeURIComponent(
+        query
+      )}&variables=${encodeURIComponent(JSON.stringify(variables))}`
+    );
+  });
+});

src/exchanges/fetch.ts

@@ -11,7 +11,7 @@ interface Body {
 }
 
 /** A default exchange for fetching GraphQL requests. */
-export const fetchExchange: Exchange = ({ forward }) => {
+export const fetchExchange: Exchange = ({ client, forward }) => {
   const isOperationFetchable = (operation: Operation) => {
     const { operationName } = operation;
     return operationName === 'query' || operationName === 'mutation';
@@ -29,7 +29,7 @@ export const fetchExchange: Exchange = ({ forward }) => {
           filter(op => op.operationName === 'teardown' && op.key === key)
         );
 
-        return pipe(createFetchSource(operation), takeUntil(teardown$));
+        return pipe(createFetchSource(operation, operation.operationName === 'query' && client.preferGetMethod), takeUntil(teardown$));
       })
     );
 
@@ -53,7 +53,7 @@ const getOperationName = (query: DocumentNode): string | null => {
   return node !== undefined && node.name ? node.name.value : null;
 };
 
-const createFetchSource = (operation: Operation) => {
+const createFetchSource = (operation: Operation, shouldUseGet: boolean) => {
   if (
     process.env.NODE_ENV !== 'production' &&
     operation.operationName === 'subscription'
@@ -88,9 +88,9 @@ const createFetchSource = (operation: Operation) => {
     }
 
     const fetchOptions = {
-      body: JSON.stringify(body),
-      method: 'POST',
       ...extraOptions,
+      body: shouldUseGet ? undefined : JSON.stringify(body),
+      method: shouldUseGet ? 'GET' : 'POST',
       headers: {
         'content-type': 'application/json',
         ...extraOptions.headers,
@@ -99,6 +99,10 @@ const createFetchSource = (operation: Operation) => {
         abortController !== undefined ? abortController.signal : undefined,
     };
 
+    if (shouldUseGet) {
+      operation.context.url = convertToGet(operation.context.url, body);
+    }
+
     let ended = false;
 
     Promise.resolve()
@@ -146,3 +150,15 @@ const executeFetch = (
       }
     });
 };
+
+export const convertToGet = (uri: string, body: Body): string => {
+  const queryParams: string[] = [`query=${encodeURIComponent(body.query)}`];
+
+  if (body.variables) {
+    queryParams.push(
+      `variables=${encodeURIComponent(JSON.stringify(body.variables))}`
+    );
+  }
+
+  return uri + '?' + queryParams.join('&');
+};