Discord Channel

Provides CodeMirror 6 extension with a parser mode for GraphQL along with autocomplete and linting powered by your GraphQL Schema.

npm install cm6-graphql

CodeMirror 6 customization is done through extensions. This package is an extension that customizes CodeMirror 6 for GraphQL.

import { basicSetup, EditorView } from 'codemirror';
import { graphql } from 'cm6-graphql';

const view = new EditorView({
  doc: `mutation mutationName {
    setString(value: "newString")
  }`,
  extensions: [basicSetup, graphql(myGraphQLSchema)],
  parent: document.body,
});

Note: You have to provide a theme to CodeMirror 6 for the styling you want. You can take a look at this example or see the CodeMirror 6 documentation examples for more details.

If you need to dynamically update the GraphQL schema used in the editor, you can call updateSchema with the CodeMirror EditorView instance and the new schema

import { updateSchema } from 'cm6-graphql';

const onNewSchema = schema => {
  updateSchema(view, schema);
};