Neolithic Programming Machine
    Wondering what’s next for npm?Check out our public roadmap! »

    codemirror-graphql

    1.0.2 • Public • Published

    GraphQL mode for CodeMirror

    NPM npm downloads License

    Provides CodeMirror with a parser mode for GraphQL along with a live linter and typeahead hinter powered by your GraphQL Schema.

    Demo .gif of GraphQL Codemirror Mode

    Getting Started

    npm install --save codemirror-graphql
    

    CodeMirror helpers install themselves to the global CodeMirror when they are imported.

    import type { ValidationContext, SDLValidationContext } 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';
    
    CodeMirror.fromTextArea(myTextarea, {
      mode: 'graphql',
      lint: {
        schema: myGraphQLSchema,
        validationRules: [ExampleRule],
      },
      hintOptions: {
        schema: myGraphQLSchema,
      },
    });

    External Fragments Example

    If you want to have autcompletion for external fragment definitions, there's a new configuration setting available

    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 externalFragments = `
      fragment MyFragment on Example {
        id: ID!
        name: String!
      }
       fragment AnotherFragment on Example {
        id: ID!
        title: String!
      }
    `;
    
    CodeMirror.fromTextArea(myTextarea, {
      mode: 'graphql',
      lint: {
        schema: myGraphQLSchema,
      },
      hintOptions: {
        schema: myGraphQLSchema,
        // 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! It uses the ValidationRule interface.

    import type { ValidationRule } 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 ExampleRule: ValidationRule = context => {
      // your custom rules here
      const schema = context.getSchema();
      const document = context.getDocument();
      return {
        NamedType(node) {
          if (node.name.value !== node.name.value.toLowercase()) {
            context.reportError('only lowercase type names allowed!');
          }
        },
      };
    };
    
    CodeMirror.fromTextArea(myTextarea, {
      mode: 'graphql',
      lint: {
        schema: myGraphQLSchema,
        validationRules: [ExampleRule],
      },
      hintOptions: {
        schema: myGraphQLSchema,
      },
    });

    Build for the web with webpack or browserify.

    Keywords

    none

    Install

    npm i codemirror-graphql

    DownloadsWeekly Downloads

    143,895

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    193 kB

    Total Files

    94

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar