Registry / devops / codemirror-graphql

codemirror-graphql

library2.2.7jsnpmunverified

Provides CodeMirror 5 with a dedicated parser mode for GraphQL, along with live linting and typeahead autocompletion powered by a GraphQL schema. Version 2.2.7 is the latest stable release in the 2.x line, which targets CodeMirror 5 (not CodeMirror 6—use cm6-graphql for CM6). The package supports GraphQL v15, v16, and v17. It is part of the GraphiQL ecosystem and is maintained by the GraphQL Foundation. Key differentiators include deep integration with GraphQL schemas for context-aware hints and validation, support for external fragments, and custom validation rules.

devops

npm install codemirror-graphql

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · CODEMIRROR-GRAPHQL

codemirror-graphql

devopsjavascriptv2.2.7

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 mode

✓ import 'codemirror-graphql/mode'

✗ import { mode } from 'codemirror-graphql'

Mode, hint, and lint are side-effect imports that register themselves on the global CodeMirror object. Named exports are not available as direct imports.

graphql hint

✓ import 'codemirror-graphql/hint'

✗ const hint = require('codemirror-graphql/hint')

Importing with require() will not register the addon; it is a side-effect module.

graphql lint

✓ import 'codemirror-graphql/lint'

✗ import CodeMirrorGraphQLLint from 'codemirror-graphql/lint'

Lint addon is registered as a side-effect; no default export.

CodeMirror

✓ import CodeMirror from 'codemirror'

✗ import { CodeMirror } from 'codemirror'

CodeMirror exports a default object in CJS; ESM requires default import.

Sets up a CodeMirror 5 editor with GraphQL syntax highlighting, live linting, and autocomplete hints powered by a GraphQL schema.

import type { ValidationContext } from 'graphql'; import CodeMirror from 'codemirror'; import 'codemirror/addon/hint/show-hint'; import 'codemirror/addon/lint/lint'; import 'codemirror-graphql/hint'; import 'codemirror-graphql/lint'; import 'codemirror-graphql/mode'; const myTextarea = document.getElementById('editor') as HTMLTextAreaElement; CodeMirror.fromTextArea(myTextarea, { mode: 'graphql', lint: { schema: myGraphQLSchema, // provide a GraphQLSchema object }, hintOptions: { schema: myGraphQLSchema, }, });

Debug

Known issues

breakingThis package is for CodeMirror 5 only. CodeMirror 6 is not supported; use cm6-graphql instead.

fix

If using CodeMirror 6, replace with @graphiql/cm6-graphql or cm6-graphql package.

affects: >=2.0.0

deprecatedThe package has not been actively updated to support newer CodeMirror 5 versions? (Check compatibility)

fix

Verify with latest CodeMirror 5 release notes.

affects: >=2.2.0

gotchaImports are side-effect-only; do not attempt to destructure named exports.

fix

Use `import 'codemirror-graphql/mode'` without destructuring.

affects: >=1.0.0

gotchaRequires both `codemirror/addon/hint/show-hint` and `codemirror/addon/lint/lint` to be imported before the graphql addons.

fix

Import CodeMirror addons in order: show-hint, lint, then graphql addons.

affects: >=1.0.0

breakingGraphQL v15 is no longer supported in some future releases?

fix

Use GraphQL v16 or v17. Check peer dependencies.

affects: >=2.2.0

Errors

Common errors & fixes

Error: Cannot find module 'codemirror-graphql/mode'

Package not installed or path incorrect.

fix

Run `npm install codemirror-graphql` and ensure import path matches installed package.

Uncaught TypeError: Cannot read properties of undefined (reading 'lint')

Missing import of 'codemirror/addon/lint/lint' before graphql lint.

fix

Add `import 'codemirror/addon/lint/lint'` before importing graphql lint addon.

Schema is not provided to lint/hint options

Missing schema in lint or hintOptions configuration.

fix

Pass a valid GraphQLSchema object in the `lint.schema` and `hintOptions.schema` properties.

Upgrade

Version history

2.2.7latest on npm

Audit

Dependencies

@codemirror/languagerequiredRequired peer dependency for CodeMirror 6 integration (though this package is for CM5, the peer dep is specified).

codemirrorrequiredCore CodeMirror 5 library required as a peer dependency.

graphqlrequiredGraphQL library for schema parsing and validation.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/graphql/graphiql ↗

packagecodemirror-graphql ↗

homepagehttps://github.com/graphql/graphiql/tree/main/packages/codemirror-graphql#readme ↗