chore: make interfaces consistent

Author: acao

packages/codemirror-graphql/README.md

@@ -45,15 +45,14 @@ CodeMirror.fromTextArea(myTextarea, {
 If you want to have autcompletion for external fragment definitions, there's a new configuration setting available
 
 ```ts
-import { parse, visit } from 'graphql';
 import CodeMirror from 'codemirror';
 import 'codemirror/addon/hint/show-hint';
 import 'codemirror/addon/lint/lint';
 import 'codemirror-graphql/hint';
 import 'codemirror-graphql/lint';
 import 'codemirror-graphql/mode';
 
-const externalFragmentsExample = `
+const externalFragments = `
   fragment MyFragment on Example {
     id: ID!
     name: String!
@@ -64,26 +63,24 @@ const externalFragmentsExample = `
   }
 `;
 
-const fragmentDefinitions = visit(parse(externalFragmentsExample), {
-  FragmentDefinition(node) {
-    return node;
-  },
-});
-
 CodeMirror.fromTextArea(myTextarea, {
   mode: 'graphql',
   lint: {
     schema: myGraphQLSchema,
   },
   hintOptions: {
     schema: myGraphQLSchema,
-    externalFragmentDefinitions: fragmentDefinitions,
+    // here we use a string, but
+    // you can also provide an array of FragmentDefinitionNodes
+    externalFragments,
   },
 });
 ```
 
 ### Custom Validation Rules
 
+If you want to show custom validation, you can do that too!
+
 ```js
 import type { ValidationContext, SDLValidationContext } from 'graphql';
 

packages/codemirror-graphql/src/hint.js

@@ -13,7 +13,7 @@
 import CodeMirror from 'codemirror';
 import { getAutocompleteSuggestions } from 'graphql-language-service-interface';
 import { Position } from 'graphql-language-service-utils';
-
+import { getFragmentDefinitions } from './utils/getFragmentDefintions';
 /**
  * Registers a "hint" helper for CodeMirror.
  *
@@ -52,7 +52,9 @@ CodeMirror.registerHelper('hint', 'graphql', (editor, options) => {
     editor.getValue(),
     position,
     token,
-    options.externalFragmentDefinitions || undefined,
+    Array.isArray(this.props?.externalFragments)
+      ? this.props.externalFragments
+      : getFragmentDefinitions(this.props.externalFragments),
   );
 
   const results = {

packages/graphiql/src/components/QueryEditor.tsx

@@ -40,15 +40,6 @@ type QueryEditorProps = {
   externalFragments?: string | FragmentDefinitionNode[];
 };
 
-function gatherFragmentDefinitions(graphqlString: string) {
-  const definitions: FragmentDefinitionNode[] = [];
-  visit(parse(graphqlString), {
-    FragmentDefinition(node) {
-      definitions.push(node);
-    },
-  });
-  return definitions;
-}
 /**
  * QueryEditor
  *
@@ -101,27 +92,6 @@ export class QueryEditor extends React.Component<QueryEditorProps, {}>
     require('codemirror-graphql/jump');
     require('codemirror-graphql/mode');
 
-    const hintOptions: {
-      schema?: GraphQLSchema;
-      externalFragmentDefinitions?: FragmentDefinitionNode[];
-      closeOnUnfocus: boolean;
-      completeSingle: boolean;
-      container: any;
-    } = {
-      schema: this.props.schema,
-      closeOnUnfocus: false,
-      completeSingle: false,
-      container: this._node,
-    };
-
-    if (this.props.externalFragments) {
-      hintOptions.externalFragmentDefinitions = Array.isArray(
-        this.props?.externalFragments,
-      )
-        ? this.props.externalFragments
-        : gatherFragmentDefinitions(this.props.externalFragments);
-    }
-
     const editor: CM.Editor = (this.editor = CodeMirror(this._node, {
       value: this.props.value || '',
       lineNumbers: true,
@@ -139,8 +109,16 @@ export class QueryEditor extends React.Component<QueryEditorProps, {}>
       lint: {
         schema: this.props.schema,
         validationRules: this.props.validationRules ?? null,
+        // linting accepts string or FragmentDefinitionNode[]
+        externalFragments: this.props?.externalFragments,
+      },
+      hintOptions: {
+        schema: this.props.schema,
+        closeOnUnfocus: false,
+        completeSingle: false,
+        container: this._node,
+        externalFragments: this.props?.externalFragments,
       },
-      hintOptions,
       info: {
         schema: this.props.schema,
         renderDescription: (text: string) => md.render(text),