cm6-graphql

library0.2.1jsnpmunverified

Provides GraphQL language support for CodeMirror 6, including syntax highlighting, autocompletion, linting, and schema-aware features. Current stable version is 0.2.1, actively maintained with frequent updates. Key differentiators: integrates deeply with GraphQL schema (introspection or SDL) for intelligent autocomplete and validation, leverages CodeMirror 6's modern extension system, and supports GraphQL.js v15, v16, and v17. Unlike generic language modes, it offers context-aware completions for fields, arguments, and directives based on the schema. Requires CodeMirror 6 extensions and the graphql package as peers.

devops

npm install cm6-graphql

package ↗

INSTALL

IMPORT

SIG · CM6-GRAPHQL

cm6-graphql

devopsjavascriptv0.2.1

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

graphql

✓ import { graphql } from 'cm6-graphql'

✗ import graphql from 'cm6-graphql'

Named export; default import undefined since v0.1

graphqlLanguage

✓ import { graphqlLanguage } from 'cm6-graphql'

Lezer grammar language object for advanced customization

graphqlSchema

✓ import { graphqlSchema } from 'cm6-graphql'

Function to create schema-based autocomplete and linting, use with a GraphQLSchema instance

Shows minimal setup: import GraphQL language extension, build a schema, and create an editor with basic setup and schema-aware autocomplete and linting.

import { EditorView, basicSetup } from 'codemirror' import { graphql } from 'cm6-graphql' import { buildSchema } from 'graphql' const schema = buildSchema(` type Query { hello: String users: [User] } type User { id: ID! name: String } `) const view = new EditorView({ doc: `{ hello }`, extensions: [ basicSetup, graphql(schema) ], parent: document.body })

Debug

Known issues

breakingPrior to v0.2.0, default export was used; switched to named exports.

fix

Use named imports: import { graphql } from 'cm6-graphql'

affects: <0.2.0

deprecatedgraphqlLanguage() without schema is deprecated; always provide schema for full functionality.

fix

Pass schema or AsyncSchema to graphql()

affects: >=0.1.0

gotchaAutocomplete only works if a schema is provided; without schema, only basic syntax highlighting.

fix

Always provide a schema via graphql(schema) or graphqlSchema(schema)

affects: >=0.1.0

breakingDropped support for GraphQL.js v14 in v0.2.0

fix

Use graphql ^15.0.0 || ^16.0.0 || ^17.0.0

affects: >=0.2.0

gotchaSchema must be synchronous or provide an async fetcher; introspection may not work out-of-the-box.

fix

Use graphqlSchema with fetchSchema for introspection

affects: >=0.1.0

gotchaRequires CodeMirror 6 peer dependencies at compatible versions; mismatch may cause cryptic errors.

fix

Ensure @codemirror/* packages are all v6.x and lezer is up-to-date

affects: >=0.1.0

Errors

Common errors & fixes

Cannot find module 'cm6-graphql'

Package not installed or pathed incorrectly

fix

npm install cm6-graphql

TypeError: graphql is not a function

Default import used instead of named import

fix

Use import { graphql } from 'cm6-graphql'

Error: Schema must be provided to enable autocomplete

graphql() called without schema

fix

Pass schema: graphql(schema) or use graphqlLanguage() if no schema needed

The requested module 'graphql' does not provide an export named 'buildSchema'

Incorrect import from graphql package

fix

Ensure graphql package is installed: import { buildSchema } from 'graphql'

Upgrade

Version history

0.2.1latest on npm

Audit

Dependencies

graphqlrequiredPeer dependency for GraphQL language utilities and type system

@codemirror/staterequiredPeer dependency for CodeMirror 6 state management

@codemirror/viewrequiredPeer dependency for CodeMirror 6 view layer

@codemirror/languagerequiredPeer dependency for CodeMirror 6 language support

@codemirror/autocompleterequiredPeer dependency for autocompletion integration

@codemirror/lintrequiredPeer dependency for linting integration

@lezer/highlightrequiredPeer dependency for syntax highlighting

Agent activity

7 hits · last 30 days

node

Amazon

Resources

packagecm6-graphql ↗