feat: add batching strategy using aliases

Author: Samuel Vazquez

packages/graphiql-plugin-batch-request/README.md

@@ -2,9 +2,86 @@
 
 This package provides a plugin that allows sending a batch request to a GraphQL Server and thence into the GraphiQI UI.
 
+The plugin scope is for sending multiple GraphQL using 2 main batching approaches:
+1. Single operation.
+2. Array of operations (GraphQL server must be configured to allow arrays).
+
+### Single operation
+Combine multiple operations ad execute them as one.
+
+For example, given the following GraphQL operations:
+
+```graphql
+query Query1($arg: String) {
+  field1
+  field2(input: $arg)
+}
+
+query Query2($arg: String) {
+  field2(input: $arg)
+  alias: field3
+}
+```
+
+These can be merged into one operation:
+
+```graphql
+query ($_0_arg: String, $_1_arg: String) {
+  _0_field1: field1
+  _0_field2: field2(input: $_0_arg)
+  _1_field2: field3(input: $_1_arg)
+  _1_alias: field3
+}
+```
+
+### Array of operations
+Combine multiple GraphQL Requests and combine them into one GraphQL Request using an array, having the server recognize the request as an array of operations instead of a single one, and handle each operation separately.
+
+For example, given the following GraphQL Requests:
+
+```json
+{
+  "operationName": "Query1",
+  "query": "query Query1($arg: String) { ... }",
+  "variables": { 
+    "arg": "foo"
+  }
+}
+
+{
+  "operationName": "Query2",
+  "query": "query Query2($arg: String) { ... }",
+  "variables": { 
+    "arg": "foo"
+  }
+}
+
+```
+
+These can be merged into one GraphQL Array Request:
+
+```json
+[
+  {
+    "operationName": "Query1",
+    "query": "query Query1($arg: String) { ... }",
+    "variables": { 
+      "arg": "foo"
+    }
+  },
+  {
+    "operationName": "Query2",
+    "query": "query Query2($arg: String) { ... }",
+    "variables": { 
+      "arg": "foo"
+    }
+  }
+]
+```
+
 ## Install
 
-Use your favoriton package manager to install the package:
+Use your favorite package manager to install the package:
 
 ```sh
 npm i -S @graphiql/plugin-batch-request
@@ -18,8 +95,6 @@ npm i -S react react-dom graphql
 
 ## Usage
 
-The plugin scope is for sending multiple GraphQL operations as an array, so the GraphQL server must be configured to allow arrays.
-
 ```jsx
 import { useBatchRequestPlugin } from '@graphiql/plugin-batch-request';
 import { createGraphiQLFetcher } from '@graphiql/toolkit';

packages/graphiql-plugin-batch-request/jest.config.js

@@ -0,0 +1,5 @@
+const base = require('../../jest.config.base')(__dirname);
+
+module.exports = {
+  ...base,
+};

packages/graphiql-plugin-batch-request/package.json

@@ -30,6 +30,7 @@
   "dependencies": {
     "@graphiql/react": "^0.15.0",
     "@fortawesome/fontawesome-free": "6.2.1",
+    "@graphql-tools/utils": "9.1.4",
     "react-checkbox-tree": "1.8.0"
   },
   "peerDependencies": {

packages/graphiql-plugin-batch-request/src/batch-request-plugin.tsx

@@ -1,15 +1,19 @@
-import { PlayIcon, Spinner, StopIcon, useEditorContext } from '@graphiql/react';
-import { FetcherParams } from '@graphiql/toolkit';
-import { GraphiQLBatchRequestProps, TabsWithOperations } from 'graphiql-batch-request';
+import { Button, ButtonGroup, PlayIcon, Spinner, StopIcon, useEditorContext } from '@graphiql/react';
+import { FetcherParamsWithDocument, GraphiQLBatchRequestProps, TabsWithOperations } from 'graphiql-batch-request';
 import { GraphQLError, parse, print } from 'graphql';
 import { Kind } from 'graphql/language';
 import { useState } from 'react';
 import CheckboxTree from 'react-checkbox-tree';
+import { filterDocumentByOperationName } from './filter-document';
+import { mergeRequests } from './merge-requests';
 
 import "@fortawesome/fontawesome-free/css/all.css";
 import 'react-checkbox-tree/lib/react-checkbox-tree.css';
 import './graphiql-batch-request.d.ts';
 import './index.css';
+import { FetcherParams } from '@graphiql/toolkit';
+
+enum BatchStrategy { ALIASES, ARRAY };
 
 export function BatchRequestPlugin({
   url,
@@ -67,6 +71,7 @@ export function BatchRequestPlugin({
     })
   );
 
+  const [batchingStrategy, setBatchingStrategy] = useState(BatchStrategy.ARRAY);
   const [batchResponseLoading, setBatchResponseLoading] = useState(false);
   const [executeButtonDisabled, setExecuteButtonDisabled] = useState(
     useAllOperations === false
@@ -89,7 +94,7 @@ export function BatchRequestPlugin({
   }
 
   const sendBatchRequest = () => {
-    const operations: FetcherParams[] = [];
+    const operations: FetcherParamsWithDocument[] = [];
     let headers = {};
     for (const selectedOperation of selectedOperations) {
       const [tabId, selectedOperationName] = selectedOperation.split('|');
@@ -102,20 +107,44 @@ export function BatchRequestPlugin({
         )
         if (selectedOperationDefinition) {
           headers = {...headers, ...tab.headers};
+          const document = filterDocumentByOperationName(tab.document, selectedOperationDefinition.name?.value);
+          console.log(`filtered document op: ${selectedOperationDefinition.name?.value}\n`, print(document));
           operations.push({
+            document,
             operationName: selectedOperationDefinition.name?.value,
-            query: print(tab.document),
+            query: print(document),
             variables: tab.variables
           })
         };
       }
     }
+
+    let payload: FetcherParams[] | FetcherParams = [];
+    if (batchingStrategy === BatchStrategy.ARRAY) {
+      payload = operations.map(({query, operationName, variables}) => ({ operationName, query, variables }));
+    } else if (batchingStrategy === BatchStrategy.ALIASES) {
+      const mergedRequests = mergeRequests(
+        operations.map(({document, operationName, variables}) => ({
+          operationName,
+          document,
+          variables
+        }))
+      );
+
+      console.log('merged requests:\n', print(mergedRequests.document));
+
+      payload = {
+        query: print(mergedRequests.document),
+        operationName: mergedRequests.operationName,
+        variables: mergedRequests.variables
+      }
+    }
 
     setBatchResponseLoading(true);
-
+    
     window.fetch(url, {
       method: 'POST',
-      body: JSON.stringify(operations),
+      body: JSON.stringify(payload),
       headers: {
         'content-type': 'application/json',
         ...headers
@@ -162,6 +191,32 @@ export function BatchRequestPlugin({
             You have selected {selectedOperations.length === 1 ? `${selectedOperations.length} operation.` : `${selectedOperations.length} operations.`}
           </p>
         </div>
+        <div className="graphiql-batch-request-strategy-section">
+          <div>
+            <div className="graphiql-batch-request-strategy-title">Batch strategy</div>
+            <div className="graphiql-batch-request-strategy-caption">
+              How to batch operations.
+            </div>
+          </div>
+          <div>
+            <ButtonGroup>
+              <Button
+                type="button"
+                className={batchingStrategy === BatchStrategy.ALIASES ? 'active' : ''}
+                onClick={() => setBatchingStrategy(BatchStrategy.ALIASES)}
+              >
+                Aliases
+              </Button>
+              <Button
+                type="button"
+                className={batchingStrategy === BatchStrategy.ARRAY ? 'active' : ''}
+                onClick={() => setBatchingStrategy(BatchStrategy.ARRAY)}
+              >
+                Array
+              </Button>
+            </ButtonGroup>
+          </div>
+        </div>
         <CheckboxTree
           icons={{
             expandClose: <i className="fa-solid fa-angle-right" />,

packages/graphiql-plugin-batch-request/src/filter-document.ts

@@ -0,0 +1,66 @@
+import { 
+  DocumentNode, 
+  Kind, 
+  FragmentDefinitionNode, 
+  OperationDefinitionNode, 
+  SelectionSetNode
+} from 'graphql';
+
+export const filterDocumentByOperationName = (
+  document: DocumentNode, 
+  operationName?: string
+): DocumentNode => {
+  let filteredOperation: OperationDefinitionNode | undefined;
+  const fragments: Record<string, FragmentDefinitionNode> = {};
+
+  document.definitions.forEach(definition => {
+    if (definition.kind === Kind.OPERATION_DEFINITION && definition.name?.value === operationName) {
+      filteredOperation = definition;
+    }
+    if (definition.kind === Kind.FRAGMENT_DEFINITION) {
+      fragments[definition.name.value] = definition;
+    }
+  });
+
+  if (filteredOperation) {
+    const filteredFragments = filterSelectionSet(filteredOperation.selectionSet, fragments);
+    return {
+      kind: Kind.DOCUMENT,
+      definitions: [...filteredFragments, filteredOperation]
+    };
+  }
+
+  return {
+    kind: Kind.DOCUMENT,
+    definitions: []
+  };
+}
+
+export const filterSelectionSet = (
+  selectionSet: SelectionSetNode | undefined, 
+  fragments: Record<string, FragmentDefinitionNode>
+): FragmentDefinitionNode[] => {
+
+  if (!selectionSet) {
+    return [];
+  }
+
+  const filteredFragments: FragmentDefinitionNode[] = [];
+
+  selectionSet.selections.forEach(selection => {
+    if(selection.kind === Kind.FRAGMENT_SPREAD && fragments[selection.name.value]) {
+      const fragment = fragments[selection.name.value];
+      filteredFragments.push(
+        fragment,
+        ...filterSelectionSet(fragment.selectionSet, fragments)
+      );
+    }
+    else if (selection.kind === Kind.FIELD || selection.kind === Kind.INLINE_FRAGMENT) {
+      filteredFragments.push(
+        ...filterSelectionSet(selection.selectionSet, fragments)
+      );
+    }
+  });
+  
+  return filteredFragments;
+}

packages/graphiql-plugin-batch-request/src/graphiql-batch-request.d.ts

@@ -1,6 +1,7 @@
 declare module 'graphiql-batch-request' {
   import { ComponentType } from 'react';
   import { DocumentNode, OperationDefinitionNode } from 'graphql/language';
+  import { FetcherParams } from '@graphiql/toolkit';
 
   type TabWithOperations = {
     id: string,
@@ -12,6 +13,8 @@ declare module 'graphiql-batch-request' {
 
   export type TabsWithOperations = Record<string, TabWithOperations>;
 
+  export type FetcherParamsWithDocument = FetcherParams & { document: DocumentNode, operationName?: string };
+
   export type GraphiQLBatchRequestProps = {
     url: string,
     useAllOperations?: boolean

packages/graphiql-plugin-batch-request/src/index.css

@@ -25,6 +25,22 @@
   top: 0;
 }
 
+.graphiql-batch-request-strategy-section {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  padding: var(--px-2);
+}
+
+.graphiql-batch-request-strategy-title {
+  font-size: var(--font-size-h4);
+  font-weight: var(--font-weight-medium);
+}
+
+.graphiql-batch-request-strategy-caption {
+  color: hsla(var(--color-neutral),var(--alpha-secondary));
+}
+
 .graphiql-batch-request-content {
   margin: var(--px-16) 0 0;
 }