Codemirror-graphql NPM

GraphQL mode for CodeMirror

NOTE: For CodeMirror 6, use cm6-graphql instead

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 autocompletion 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 = /* GraphQL */ `
  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.

@types/codemirror graphql-language-service

2.0.11

29 days ago

2.0.11-canary-36f0bac1.0

4 months ago

3.0.0-canary-d86e51b8.0

10 months ago

3.0.0-canary-6ba9ba38.0

10 months ago

3.0.0-canary-30653157.0

10 months ago

3.0.0-canary-9eb9e2fb.0

10 months ago

3.0.0-canary-d38d8126.0

10 months ago

3.0.0-canary-dfb20ee6.0

10 months ago

2.0.10

8 months ago

3.0.0-canary-a9e38be1.0

10 months ago

3.0.0-canary-298f53ab.0

10 months ago

3.0.0-canary-e0e2c15a.0

10 months ago

3.0.0-canary-f5830f58.0

10 months ago

3.0.0-canary-2b03fdd0.0

10 months ago

3.0.0-canary-cd4cdaba.0

10 months ago

3.0.0-canary-de420cd7.0

10 months ago

3.0.0-canary-3e72a1f9.0

10 months ago

3.0.0-canary-6610f112.0

10 months ago

3.0.0-canary-38c2c299.0

10 months ago

3.0.0-canary-344df134.0

10 months ago

3.0.0-canary-b5674a4f.0

10 months ago

3.0.0-canary-a08e9aea.0

10 months ago

3.0.0-canary-6de7e53f.0

10 months ago

3.0.0-canary-d52fbc57.0

10 months ago

3.0.0-canary-5d4865df.0

10 months ago

3.0.0-canary-351ba549.0

10 months ago

3.0.0-canary-a6d20235.0

10 months ago

3.0.0-canary-f648417e.0

10 months ago

3.0.0-canary-d4eae891.0

10 months ago

3.0.0-canary-6bb88229.0

10 months ago

3.0.0-canary-f0f5afb3.0

10 months ago

2.0.10-canary-df664982.0

10 months ago

2.0.10-canary-943fcbde.0

10 months ago

2.0.10-canary-73a4ac55.0

10 months ago

2.0.10-canary-6698dc22.0

10 months ago

2.0.10-canary-0b758ed3.0

10 months ago

2.0.10-canary-2f7f1266.0

10 months ago

2.0.10-canary-8d17bd3c.0

10 months ago

2.0.10-canary-8cc6cc6c.0

10 months ago

2.0.9-alpha.1

11 months ago

2.0.10-canary-88c53ea4.0

10 months ago

2.0.10-canary-70c9456e.0

10 months ago

2.0.10-canary-616f8a33.0

10 months ago

2.0.10-canary-b6d81c61.0

10 months ago

2.0.9

10 months ago

2.0.10-canary-8f7aa55c.0

10 months ago

2.0.10-canary-a8496344.0

10 months ago

2.0.10-canary-5a3b95d3.0

10 months ago

2.0.10-canary-f5992ff0.0

10 months ago

2.0.10-canary-0ef186a2.0

10 months ago

2.0.10-canary-a97151b3.0

10 months ago

11 months ago

12 months ago

12 months ago

12 months ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2.0.0-canary-ac702ca1.0

2 years ago

2.0.0-canary-83929227.0

2 years ago

1.3.3-canary-0ac0349e.0

2 years ago

2.0.0-canary-6e4eb012.0

2 years ago

2.0.0-canary-e44ce665.0

2 years ago

2.0.0

2 years ago

2.0.0-canary-18e7a9b0.0

2 years ago

2.0.0-canary-1776f219.0

2 years ago

2.0.0-canary-e4e57679.0

2 years ago

2.0.0-canary-8f79c250.0

2 years ago

2.0.0-canary-96b6e4e7.0

2 years ago

2.0.0-canary-d00bc52e.0

2 years ago

2.0.0-canary-d3fbaaa4.0

2 years ago

2.0.0-canary-041744de.0

2 years ago

2.0.0-canary-6714df3b.0

2 years ago

2.0.0-canary-8cbe2521.0

2 years ago

2.0.0-canary-80402dea.0

2 years ago

2.0.0-canary-f9ccca99.0

2 years ago

2.0.0-canary-a106e5bf.0

2 years ago

2.0.0-canary-9c49e142.0

2 years ago

2.0.0-next.2

2 years ago

2.0.0-next.0

2 years ago

2.0.0-next.1

2 years ago

2.0.0-canary-fd0348c2.0

2 years ago

2.0.0-canary-47e02769.0

2 years ago

2.0.0-canary-2a5c10ce.0

2 years ago

2.0.0-canary-cc334b8a.0

2 years ago

2.0.0-canary-168ea3d5.0

2 years ago

2.0.0-canary-dda1cf54.0

2 years ago

2.0.0-canary-93a7238c.0

2 years ago

2.0.0-canary-e5dcaa31.0

2 years ago

2.0.0-canary-a5905d1c.0

2 years ago

2.0.0-canary-fdc1dadd.0

2 years ago

1.3.2-canary-4bf7a139.0

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

1.2.14-canary-9e6d341c.0

2 years ago

1.2.15-canary-e0939150.0

2 years ago

1.2.13-canary-8fa698e7.0

2 years ago

1.2.16-canary-63a8a0dd.0

2 years ago

1.2.16-canary-fb52a553.0

2 years ago

1.2.8

2 years ago

1.2.7

2 years ago

1.2.6

2 years ago

1.2.8-canary-166ffd7a.0

2 years ago

1.2.5

2 years ago

1.2.5-canary-6f6c49b0.0

2 years ago

1.2.6-canary-fae7d199.0

2 years ago

1.2.5-canary-58e99aa6.0

2 years ago

1.2.6-canary-8af33604.0

2 years ago

1.2.6-canary-343f1670.0

2 years ago

1.2.12

2 years ago

1.2.10

2 years ago

1.2.11

2 years ago

1.2.8-canary-bdd62cc3.0

2 years ago

1.2.8-canary-742288e7.0

2 years ago

1.2.5-canary-fea49557.0

2 years ago

1.2.10-canary-b8d145d7.0

2 years ago

1.2.5-canary-412904c6.0

2 years ago

1.2.10-canary-b96f3d10.0

2 years ago

1.2.8-canary-35604620.0

2 years ago

1.2.6-canary-aba5a940.0

2 years ago

1.2.9

2 years ago

1.2.5-canary-8ce9e283.0

2 years ago

1.2.6-canary-0b6fa337.0

2 years ago

1.2.11-canary-05b863ab.0

2 years ago

1.2.6-canary-321acad7.0

2 years ago

1.2.6-canary-033a43d2.0

2 years ago

1.2.6-canary-0d171c9c.0

2 years ago

1.2.6-canary-1a140c54.0

2 years ago

1.2.8-canary-b9c71c81.0

2 years ago

1.2.9-canary-75bdc860.0

2 years ago

1.2.6-canary-b5aba87e.0

2 years ago

1.2.8-canary-2f2c1b4d.0

2 years ago

1.2.5-canary-48f9cb01.0

2 years ago

1.2.6-canary-eb5c4300.0

2 years ago

1.2.8-canary-a19d0748.0

2 years ago

1.2.8-canary-07e866d1.0

2 years ago

1.2.9-canary-5edec51e.0

2 years ago

1.2.8-canary-ec866cba.0

2 years ago

1.2.7-canary-75700e01.0

2 years ago

1.2.8-canary-ab0be4f0.0

2 years ago

1.2.10-canary-312f863b.0

2 years ago

1.2.6-canary-1d118d28.0

2 years ago

1.2.9-canary-f20fe1e2.0

2 years ago

1.2.5-canary-325c04b9.0

2 years ago

1.2.8-canary-07a2840d.0

2 years ago

1.2.0

2 years ago

1.2.1-canary-98364dae.0

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

1.1.1-canary-dcd21ef1.0

2 years ago

1.1.1-canary-86c05353.0

2 years ago

1.2.1-canary-3410d799.0

2 years ago

1.1.1-canary-669af9ec.0

2 years ago

1.2.4-canary-1d1d33de.0

2 years ago

1.1.1-canary-86d7df95.0

2 years ago

1.1.0

2 years ago

1.2.5-canary-3dcdd158.0

2 years ago

1.2.3-canary-31c6631b.0

2 years ago

1.1.1-canary-efc41fcd.0

2 years ago

1.1.1-canary-26511707.0

2 years ago

1.1.1-canary-66346cbd.0

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

6 years ago

6 years ago

6 years ago

6 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

9 years ago

9 years ago

9 years ago