codemirror-graphql

2.0.12 • Public • Published

GraphQL mode for CodeMirror

NPM npm downloads License 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.

Readme

Keywords

none

Package Sidebar

Install

npm i codemirror-graphql

Weekly Downloads

283,342

Version

2.0.12

License

MIT

Unpacked Size

449 kB

Total Files

225

Last publish

Collaborators

  • mjmahone
  • benjie
  • acao
  • i1g
  • leebyron
  • fb
  • wincent
  • kassens
  • orta
  • asiandrummer
  • ags-