cm6-graphql (original) (raw)

0.2.1 • Public • Published 11 hours ago

• Readme
• Code Beta
• 1 Dependency
• 5 Dependents
• 87 Versions

CodeMirror 6 GraphQL Language extension

Discord Channel

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

Getting Started

CodeMirror 6 customization is done throughextensions. 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 atthis exampleor see the CodeMirror 6documentation 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); };