move GraphQL utils from graphiql to @graphiql/toolkit (#2419)

* move fillLeafs to toolkit

* move getSelectedOperationName to toolkit

* move mergeAst to toolkit

* remove unused utility module

* demote version bump to patch

.changeset/cool-dolls-study.md

@@ -0,0 +1,6 @@
+---
+'graphiql': patch
+'@graphiql/toolkit': minor
+---
+
+Move the `fillLeafs` utility function from `graphiql` into `@graphiql/toolkit` and deprecate the export from `graphiql`

.changeset/serious-buses-hear.md

@@ -0,0 +1,6 @@
+---
+'graphiql': patch
+'@graphiql/toolkit': minor
+---
+
+Move the `mergeAst` utility function from `graphiql` into `@graphiql/toolkit` and deprecate the export from `graphiql`

.changeset/wicked-comics-move.md

@@ -0,0 +1,6 @@
+---
+'graphiql': patch
+'@graphiql/toolkit': minor
+---
+
+Move the `getSelectedOperationName` utility function from `graphiql` into `@graphiql/toolkit` and deprecate the export from `graphiql`

packages/graphiql-toolkit/src/graphql-helpers/__tests__/merge-ast.spec.ts

@@ -0,0 +1,164 @@
+import {
+  GraphQLInt,
+  GraphQLObjectType,
+  GraphQLSchema,
+  parse,
+  print,
+} from 'graphql';
+
+import { mergeAst } from '../merge-ast';
+
+const schema = new GraphQLSchema({
+  query: new GraphQLObjectType({
+    name: 'Test',
+    fields: {
+      id: {
+        type: GraphQLInt,
+      },
+    },
+  }),
+});
+
+describe('MergeAst', () => {
+  it('does not modify query with no fragments', () => {
+    const query = `
+      query Test {
+        id
+      }`;
+    const mergedQuery = stripWhitespace(`
+      query Test {
+        id
+      }`);
+    expect(parseMergeAndPrint(query)).toBe(mergedQuery);
+    expect(parseMergeAndPrint(query, schema)).toBe(mergedQuery);
+  });
+
+  it('inlines simple nested fragment', () => {
+    const query = `
+      query Test {
+        ...Fragment1
+      }
+      
+      fragment Fragment1 on Test {
+        id
+      }`;
+    const mergedQuery = stripWhitespace(`
+      query Test {
+        ...on Test {
+          id
+        }
+      }`);
+    const mergedQueryWithSchema = stripWhitespace(`
+      query Test {
+        id
+      }`);
+    expect(parseMergeAndPrint(query)).toBe(mergedQuery);
+    expect(parseMergeAndPrint(query, schema)).toBe(mergedQueryWithSchema);
+  });
+
+  it('inlines triple nested fragment', () => {
+    const query = `
+      query Test {
+        ...Fragment1
+      }
+      
+      fragment Fragment1 on Test {
+        ...Fragment2
+      }
+      
+      fragment Fragment2 on Test {
+        ...Fragment3
+      }
+      
+      fragment Fragment3 on Test {
+        id
+      }`;
+    const mergedQuery = stripWhitespace(`
+      query Test {
+        ...on Test {
+          ...on Test {
+            ...on Test {
+              id
+            }
+          }
+        }
+      }`);
+    const mergedQueryWithSchema = stripWhitespace(`
+      query Test {
+        id
+      }`);
+    expect(parseMergeAndPrint(query)).toBe(mergedQuery);
+    expect(parseMergeAndPrint(query, schema)).toBe(mergedQueryWithSchema);
+  });
+
+  it('inlines multiple fragments', () => {
+    const query = `
+      query Test {
+        ...Fragment1
+        ...Fragment2
+        ...Fragment3
+      }
+      
+      fragment Fragment1 on Test {
+        id
+      }
+      
+      fragment Fragment2 on Test {
+        id
+      }
+      
+      fragment Fragment3 on Test {
+        id
+      }`;
+    const mergedQuery = stripWhitespace(`
+      query Test {
+        ...on Test {
+          id
+        }
+        ...on Test {
+          id
+        }
+        ...on Test {
+          id
+        }
+      }`);
+    const mergedQueryWithSchema = stripWhitespace(`
+      query Test {
+        id
+      }`);
+    expect(parseMergeAndPrint(query)).toBe(mergedQuery);
+    expect(parseMergeAndPrint(query, schema)).toBe(mergedQueryWithSchema);
+  });
+
+  it('removes duplicate fragment spreads', () => {
+    const query = `
+      query Test {
+        ...Fragment1
+        ...Fragment1
+      }
+      
+      fragment Fragment1 on Test {
+        id
+      }`;
+    const mergedQuery = stripWhitespace(`
+      query Test {
+        ...on Test {
+          id
+        }
+      }`);
+    const mergedQueryWithSchema = stripWhitespace(`
+      query Test {
+        id
+      }`);
+    expect(parseMergeAndPrint(query)).toBe(mergedQuery);
+    expect(parseMergeAndPrint(query, schema)).toBe(mergedQueryWithSchema);
+  });
+});
+
+function parseMergeAndPrint(query: string, maybeSchema?: GraphQLSchema) {
+  return stripWhitespace(print(mergeAst(parse(query), maybeSchema)));
+}
+
+function stripWhitespace(str: string) {
+  return str.replace(/\s/g, '');
+}

packages/graphiql/src/utility/fillLeafs.ts → packages/graphiql-toolkit/src/graphql-helpers/auto-complete.ts

@@ -1,27 +1,18 @@
-/**
- *  Copyright (c) 2021 GraphQL Contributors.
- *
- *  This source code is licensed under the MIT license found in the
- *  LICENSE file in the root directory of this source tree.
- */
-
 import {
+  DocumentNode,
   getNamedType,
+  GraphQLOutputType,
+  GraphQLSchema,
+  GraphQLType,
   isLeafType,
+  Kind,
   parse,
   print,
+  SelectionSetNode,
   TypeInfo,
   visit,
-  GraphQLSchema,
-  DocumentNode,
-  GraphQLOutputType,
-  GraphQLType,
-  SelectionSetNode,
-  Kind,
 } from 'graphql';
 
-import { Maybe } from '../components/GraphiQL';
-
 type Insertion = {
   index: number;
   string: string;
@@ -212,7 +203,7 @@ function getIndentation(str: string, index: number) {
 }
 
 function isFieldType(
-  fieldType: Maybe<GraphQLOutputType>,
+  fieldType: GraphQLOutputType | null | undefined,
 ): GraphQLOutputType | void {
   if (fieldType) {
     return fieldType;

packages/graphiql-toolkit/src/graphql-helpers/index.ts

@@ -0,0 +1,3 @@
+export * from './auto-complete';
+export * from './merge-ast';
+export * from './operation-name';

packages/graphiql/src/utility/mergeAst.ts → packages/graphiql-toolkit/src/graphql-helpers/merge-ast.ts

@@ -1,10 +1,3 @@
-/**
- *  Copyright (c) 2021 GraphQL Contributors.
- *
- *  This source code is licensed under the MIT license found in the
- *  LICENSE file in the root directory of this source tree.
- */
-
 import {
   DocumentNode,
   FieldNode,
@@ -20,9 +13,7 @@ import {
   Kind,
 } from 'graphql';
 
-type Maybe<T> = null | T;
-
-export function uniqueBy<T>(
+function uniqueBy<T>(
   array: readonly SelectionNode[],
   iteratee: (item: FieldNode) => T,
 ) {
@@ -54,12 +45,12 @@ export function uniqueBy<T>(
   return result;
 }
 
-export function inlineRelevantFragmentSpreads(
+function inlineRelevantFragmentSpreads(
   fragmentDefinitions: {
     [key: string]: FragmentDefinitionNode | undefined;
   },
   selections: readonly SelectionNode[],
-  selectionSetType?: Maybe<GraphQLOutputType>,
+  selectionSetType?: GraphQLOutputType | null,
 ): readonly SelectionNode[] {
   const selectionSetTypeName = selectionSetType
     ? getNamedType(selectionSetType).name
@@ -115,7 +106,7 @@ export function inlineRelevantFragmentSpreads(
 /**
  * Given a document AST, inline all named fragment definitions.
  */
-export default function mergeAST(
+export function mergeAst(
   documentAST: DocumentNode,
   schema?: GraphQLSchema | null,
 ): DocumentNode {

packages/graphiql/src/utility/getSelectedOperationName.ts → packages/graphiql-toolkit/src/graphql-helpers/operation-name.ts

@@ -1,17 +1,10 @@
 import { OperationDefinitionNode } from 'graphql';
 
-/**
- *  Copyright (c) 2021 GraphQL Contributors.
- *
- *  This source code is licensed under the MIT license found in the
- *  LICENSE file in the root directory of this source tree.
- */
-
 /**
  * Provided optional previous operations and selected name, and a next list of
  * operations, determine what the next selected operation should be.
  */
-export default function getSelectedOperationName(
+export function getSelectedOperationName(
   prevOperations?: OperationDefinitionNode[] | undefined,
   prevSelectedOperationName?: string,
   operations?: OperationDefinitionNode[],

packages/graphiql-toolkit/src/index.ts

@@ -1,5 +1,6 @@
 export * from './async-helpers';
 export * from './create-fetcher';
 export * from './format';
+export * from './graphql-helpers';
 export * from './storage';
 // TODO: move the most useful utilities from graphiql to here

packages/graphiql/src/components/GraphiQL.tsx

@@ -63,29 +63,30 @@ import { HeaderEditor } from './HeaderEditor';
 import { ResultViewer, RESULT_VIEWER_ID } from './ResultViewer';
 import { DocExplorer } from './DocExplorer';
 import { QueryHistory } from './QueryHistory';
-import getSelectedOperationName from '../utility/getSelectedOperationName';
 import debounce from '../utility/debounce';
 import find from '../utility/find';
-import { GetDefaultFieldNamesFn, fillLeafs } from '../utility/fillLeafs';
 import { getLeft, getTop } from '../utility/elementPosition';
-import mergeAST from '../utility/mergeAst';
 import { introspectionQueryName } from '../utility/introspectionQueries';
 import setValue from 'set-value';
 
 import {
   fetcherReturnToPromise,
+  fillLeafs,
   formatError,
   formatResult,
+  getSelectedOperationName,
   isAsyncIterable,
   isObservable,
   isPromise,
-  QueryStoreItem,
+  mergeAst,
 } from '@graphiql/toolkit';
 import type {
   Fetcher,
   FetcherOpts,
   FetcherResult,
   FetcherResultPayload,
+  GetDefaultFieldNamesFn,
+  QueryStoreItem,
   SyncFetcherResult,
   Unsubscribable,
 } from '@graphiql/toolkit';
@@ -1656,7 +1657,7 @@ class GraphiQLWithContext extends React.Component<
       return;
     }
 
-    editor.setValue(print(mergeAST(this.state.documentAST, this.state.schema)));
+    editor.setValue(print(mergeAst(this.state.documentAST, this.state.schema)));
   };
 
   handleEditQuery = debounce(100, (value: string) => {

packages/graphiql/src/index.ts

@@ -44,17 +44,15 @@ export { ToolbarButton } from './components/ToolbarButton';
 export { ToolbarGroup } from './components/ToolbarGroup';
 export { ToolbarSelect, ToolbarSelectOption } from './components/ToolbarSelect';
 
-/**
- * Utilities
- */
-export { fillLeafs } from './utility/fillLeafs';
-export { default as mergeAst } from './utility/mergeAst';
-export { default as getSelectedOperationName } from './utility/getSelectedOperationName';
-
 /**
  * Legacy exports
  */
 import { onHasCompletion as _onHasCompletion } from '@graphiql/react';
+import {
+  fillLeafs as _fillLeafs,
+  getSelectedOperationName as _getSelectedOperationName,
+  mergeAst as _mergeAst,
+} from '@graphiql/toolkit';
 
 export const onHasCompletion: typeof _onHasCompletion = function onHasCompletion(
   ...args
@@ -64,3 +62,26 @@ export const onHasCompletion: typeof _onHasCompletion = function onHasCompletion
   );
   return _onHasCompletion(...args);
 };
+
+export const fillLeafs: typeof _fillLeafs = function fillLeafs(...args) {
+  console.warn(
+    'Importing `fillLeafs` from `graphiql` is deprecated and will be removed in the next major version. Please switch to importing the `fillLeafs` function provided by the `@graphiql/toolkit` package.',
+  );
+  return _fillLeafs(...args);
+};
+
+export const getSelectedOperationName: typeof _getSelectedOperationName = function getSelectedOperationName(
+  ...args
+) {
+  console.warn(
+    'Importing `getSelectedOperationName` from `graphiql` is deprecated and will be removed in the next major version. Please switch to importing the `getSelectedOperationName` function provided by the `@graphiql/toolkit` package.',
+  );
+  return _getSelectedOperationName(...args);
+};
+
+export const mergeAst: typeof _mergeAst = function mergeAst(...args) {
+  console.warn(
+    'Importing `mergeAst` from `graphiql` is deprecated and will be removed in the next major version. Please switch to importing the `mergeAst` function provided by the `@graphiql/toolkit` package.',
+  );
+  return _mergeAst(...args);
+};