If you want to have autocompletion for external fragment definitions, there's a
new configuration setting available
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 externalFragments = /* GraphQL */`
fragment MyFragment on Example {
id: ID!
name: String!
}
fragment AnotherFragment on Example {
id: ID!
title: String!
}
`;
CodeMirror.fromTextArea(myTextarea, {
mode: 'graphql',
lint: {
schema: myGraphQLSchema,
},
hintOptions: {
schema: myGraphQLSchema,
// here we use a string, but// you can also provide an array of FragmentDefinitionNodes
externalFragments,
},
});
This JSON parser simply walks the input, generating an AST. Use this in lieu
of JSON.parse if you need character offset parse errors and an AST parse tree
with location information.
If an error is encountered, a SyntaxError will be thrown, with properties:
message: string
start: int - the start inclusive offset of the syntax error
end: int - the end exclusive offset of the syntax error
GraphQL mode for CodeMirror
Discord Channel
NOTE: For CodeMirror 6, use cm6-graphql instead
Provides CodeMirror with a parser mode for GraphQL along with a live linter and typeahead hinter powered by your GraphQL Schema.
Getting Started
CodeMirror helpers install themselves to the global CodeMirror when they are imported.
import type { ValidationContext, SDLValidationContext } 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'; CodeMirror.fromTextArea(myTextarea, { mode: 'graphql', lint: { schema: myGraphQLSchema, validationRules: [ExampleRule], }, hintOptions: { schema: myGraphQLSchema, }, });
External Fragments Example
If you want to have autocompletion for external fragment definitions, there's a new configuration setting available
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 externalFragments = /* GraphQL */ ` fragment MyFragment on Example { id: ID! name: String! } fragment AnotherFragment on Example { id: ID! title: String! } `; CodeMirror.fromTextArea(myTextarea, { mode: 'graphql', lint: { schema: myGraphQLSchema, }, hintOptions: { schema: myGraphQLSchema, // here we use a string, but // you can also provide an array of FragmentDefinitionNodes externalFragments, }, });
Custom Validation Rules
If you want to show custom validation, you can do that too! It uses the
ValidationRule
interface.import type { ValidationRule } 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 ExampleRule: ValidationRule = context => { // your custom rules here const schema = context.getSchema(); const document = context.getDocument(); return { NamedType(node) { if (node.name.value !== node.name.value.toLowercase()) { context.reportError('only lowercase type names allowed!'); } }, }; }; CodeMirror.fromTextArea(myTextarea, { mode: 'graphql', lint: { schema: myGraphQLSchema, validationRules: [ExampleRule], }, hintOptions: { schema: myGraphQLSchema, }, });
Build for the web with webpack or browserify.