GraphQL mode for CodeMirror

npm downloads Discord Channel

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.

Current Tags

1.2.11-canary-05b863ab.0 ... canary (4 years ago)
1.2.11 ... latest (4 years ago)
0.12.2-alpha.2 ... next (6 years ago)

131 Versions

1.2.11 ... 4 years ago
1.2.11-canary-05b863ab.0 ... 4 years ago
1.2.10 ... 4 years ago
1.2.10-canary-b8d145d7.0 ... 4 years ago
1.2.10-canary-b96f3d10.0 ... 4 years ago
1.2.10-canary-312f863b.0 ... 4 years ago
1.2.9 ... 4 years ago
1.2.9-canary-5edec51e.0 ... 4 years ago
1.2.9-canary-75bdc860.0 ... 4 years ago
1.2.9-canary-f20fe1e2.0 ... 4 years ago
1.2.8 ... 4 years ago
1.2.8-canary-07e866d1.0 ... 4 years ago
1.2.8-canary-166ffd7a.0 ... 4 years ago
1.2.8-canary-a19d0748.0 ... 4 years ago
1.2.8-canary-07a2840d.0 ... 4 years ago
1.2.8-canary-35604620.0 ... 4 years ago
1.2.8-canary-2f2c1b4d.0 ... 4 years ago
1.2.8-canary-ab0be4f0.0 ... 4 years ago
1.2.8-canary-ec866cba.0 ... 4 years ago
1.2.8-canary-742288e7.0 ... 4 years ago
1.2.8-canary-bdd62cc3.0 ... 4 years ago
1.2.8-canary-b9c71c81.0 ... 4 years ago
1.2.7 ... 4 years ago
1.2.7-canary-75700e01.0 ... 4 years ago
1.2.6 ... 4 years ago
1.2.6-canary-aba5a940.0 ... 4 years ago
1.2.6-canary-343f1670.0 ... 4 years ago
1.2.6-canary-1d118d28.0 ... 4 years ago
1.2.6-canary-8af33604.0 ... 4 years ago
1.2.6-canary-0b6fa337.0 ... 4 years ago
1.2.6-canary-033a43d2.0 ... 4 years ago
1.2.6-canary-0d171c9c.0 ... 4 years ago
1.2.6-canary-321acad7.0 ... 4 years ago
1.2.6-canary-1a140c54.0 ... 4 years ago
1.2.6-canary-b5aba87e.0 ... 4 years ago
1.2.6-canary-fae7d199.0 ... 4 years ago
1.2.6-canary-eb5c4300.0 ... 4 years ago
1.2.5 ... 4 years ago
1.2.5-canary-48f9cb01.0 ... 4 years ago
1.2.5-canary-8ce9e283.0 ... 4 years ago
1.2.5-canary-325c04b9.0 ... 4 years ago
1.2.5-canary-fea49557.0 ... 4 years ago
1.2.5-canary-412904c6.0 ... 4 years ago
1.2.5-canary-58e99aa6.0 ... 4 years ago
1.2.5-canary-6f6c49b0.0 ... 4 years ago
1.2.5-canary-3dcdd158.0 ... 4 years ago
1.2.4 ... 4 years ago
1.2.4-canary-1d1d33de.0 ... 4 years ago
1.2.3 ... 4 years ago
1.2.3-canary-31c6631b.0 ... 4 years ago
1.2.2 ... 4 years ago
1.2.1 ... 4 years ago
1.2.1-canary-98364dae.0 ... 4 years ago
1.2.1-canary-3410d799.0 ... 4 years ago
1.2.0 ... 4 years ago
1.1.1-canary-efc41fcd.0 ... 4 years ago
1.1.1-canary-86c05353.0 ... 4 years ago
1.1.1-canary-86d7df95.0 ... 4 years ago
1.1.1-canary-26511707.0 ... 4 years ago
1.1.1-canary-669af9ec.0 ... 4 years ago
1.1.1-canary-dcd21ef1.0 ... 4 years ago
1.1.1-canary-66346cbd.0 ... 4 years ago
1.1.0 ... 4 years ago
1.0.3 ... 4 years ago
1.0.2 ... 5 years ago
1.0.1 ... 5 years ago
1.0.0 ... 5 years ago
0.15.2 ... 5 years ago
0.15.1 ... 5 years ago
0.15.0 ... 5 years ago
0.14.0 ... 5 years ago
0.13.1 ... 5 years ago
0.13.0 ... 5 years ago
0.12.4 ... 5 years ago
0.12.3 ... 5 years ago
0.12.2 ... 6 years ago
0.12.2-alpha.2 ... 6 years ago
0.12.2-alpha.1 ... 6 years ago
0.12.2-alpha.0 ... 6 years ago
0.12.1 ... 6 years ago
0.12.0 ... 6 years ago
0.12.0-alpha.11 ... 6 years ago
0.12.0-alpha.9 ... 6 years ago
0.12.0-alpha.8 ... 6 years ago
0.12.0-alpha.7 ... 6 years ago
0.12.0-alpha.6 ... 6 years ago
0.12.0-alpha.5 ... 6 years ago
0.12.0-alpha.4 ... 6 years ago
0.12.0-alpha.3 ... 6 years ago
0.12.0-alpha.1 ... 6 years ago
0.12.0-alpha.0 ... 6 years ago
0.11.6 ... 6 years ago
0.11.5 ... 6 years ago
0.11.4 ... 6 years ago
0.11.3 ... 6 years ago
0.11.2 ... 6 years ago
0.11.1 ... 7 years ago
0.9.0 ... 7 years ago
0.8.3 ... 7 years ago
0.8.2 ... 7 years ago
0.7.1 ... 8 years ago
0.6.12 ... 8 years ago
0.6.11 ... 9 years ago
0.6.10 ... 9 years ago
0.6.9 ... 9 years ago
0.6.8 ... 9 years ago
0.6.7 ... 9 years ago
0.6.6 ... 9 years ago
0.6.5 ... 9 years ago
0.6.4 ... 9 years ago
0.6.3 ... 9 years ago
0.6.2 ... 9 years ago
0.6.1 ... 9 years ago
0.6.0 ... 9 years ago
0.5.9 ... 9 years ago
0.5.8 ... 9 years ago
0.5.7 ... 10 years ago
0.5.6 ... 10 years ago
0.5.5 ... 10 years ago
0.5.4 ... 10 years ago
0.5.3 ... 10 years ago
0.5.2 ... 10 years ago
0.5.1 ... 10 years ago
0.5.0 ... 10 years ago
0.3.1 ... 10 years ago
0.3.0 ... 10 years ago
0.2.2 ... 10 years ago
0.2.1 ... 10 years ago
0.2.0 ... 11 years ago
0.1.1 ... 11 years ago
0.1.0 ... 11 years ago