Skip to content

Latest commit

 

History

History
52 lines (40 loc) · 1.63 KB

README.md

File metadata and controls

52 lines (40 loc) · 1.63 KB

CodeMirror 6 GraphQL Language extension

NPM npm downloads License Discord Channel

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

Getting Started

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.

Updating schema

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);
};