Package Exports

codemirror-graphql/hint
codemirror-graphql/hint.js
codemirror-graphql/info
codemirror-graphql/info.js
codemirror-graphql/jump
codemirror-graphql/jump.js
codemirror-graphql/lint
codemirror-graphql/lint.js
codemirror-graphql/mode
codemirror-graphql/mode.js
codemirror-graphql/results/mode
codemirror-graphql/results/mode.js
codemirror-graphql/utils/collectVariables
codemirror-graphql/utils/collectVariables.js
codemirror-graphql/utils/getTypeInfo
codemirror-graphql/utils/getTypeInfo.js
codemirror-graphql/utils/info-addon
codemirror-graphql/utils/info-addon.js
codemirror-graphql/variables/hint
codemirror-graphql/variables/hint.js
codemirror-graphql/variables/lint
codemirror-graphql/variables/lint.js
codemirror-graphql/variables/mode
codemirror-graphql/variables/mode.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (codemirror-graphql) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

GraphQL mode for CodeMirror

npm downloads Discord Channel

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.