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';
 
@@ -99,8 +96,8 @@ const ExampleRule = (context: ValidationContext | SDLValidationContext) => {
   const schema = context.getSchema();
   const document = context.getDocument();
   // do stuff
-  if (containsSomethingWeDontWant(document, schema)) {
-    context.reportError('Nope not here');
+  if (operationContainsCondition(document, schema)) {
+    context.reportError('this contains the condition, oops!');
   }
 };
 

packages/codemirror-graphql/src/__tests__/hint-test.js

@@ -40,7 +40,7 @@ function createEditorWithHint() {
       schema: TestSchema,
       closeOnUnfocus: false,
       completeSingle: false,
-      externalFragments: [],
+      externalFragments: 'fragment Example on Test { id }',
     },
   });
 }
@@ -767,6 +767,11 @@ describe('graphql-hint', () => {
         type: TestType,
         description: 'fragment Foo on Test',
       },
+      {
+        text: 'Example',
+        type: TestType,
+        description: 'fragment Example on Test',
+      },
     ];
     const expectedSuggestions = getExpectedSuggestions(list);
     expect(suggestions.list).to.deep.equal(expectedSuggestions);
@@ -783,6 +788,11 @@ describe('graphql-hint', () => {
         type: TestType,
         description: 'fragment Foo on Test',
       },
+      {
+        text: 'Example',
+        type: TestType,
+        description: 'fragment Example on Test',
+      },
     ];
     const expectedSuggestions = getExpectedSuggestions(list);
     expect(suggestions.list).to.deep.equal(expectedSuggestions);

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/getFragmentDefinitions';
 /**
  * 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(options.externalFragments)
+      ? options.externalFragments
+      : getFragmentDefinitions(options.externalFragments),
   );
 
   const results = {

packages/codemirror-graphql/src/utils/getFragmentDefinitions.js

@@ -0,0 +1,12 @@
+import { visit, parse } from 'graphql';
+import type { FragmentDefinitionNode } from 'graphql';
+
+export function getFragmentDefinitions(graphqlString: string) {
+  const definitions: FragmentDefinitionNode[] = [];
+  visit(parse(graphqlString), {
+    FragmentDefinition(node) {
+      definitions.push(node);
+    },
+  });
+  return definitions;
+}

packages/graphiql/src/components/QueryEditor.tsx

@@ -12,8 +12,6 @@ import {
   GraphQLSchema,
   GraphQLType,
   ValidationRule,
-  visit,
-  parse,
 } from 'graphql';
 import MD from 'markdown-it';
 import { normalizeWhitespace } from '../utility/normalizeWhitespace';
@@ -40,15 +38,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 +90,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 +107,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),