cm6-graphql
TypeScript icon, indicating that this package has built-in type declarations

0.0.15 • Public • Published

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

Readme

Keywords

none

Package Sidebar

Install

npm i cm6-graphql

Weekly Downloads

40,059

Version

0.0.15

License

MIT

Unpacked Size

237 kB

Total Files

53

Last publish

Collaborators

  • acao