Options
All
  • Public
  • Public/Protected
  • All
Menu

Package codemirror-graphql

GraphQL mode for CodeMirror

NPM npm downloads License 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.

Demo .gif of GraphQL Codemirror Mode

Getting Started

npm install codemirror-graphql

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.

Index

Type aliases

ArgumentReference

ArgumentReference: { argument: GraphQLArgument; directive?: GraphQLDirective; field?: GraphQLField<any, any>; kind: "Argument"; schema?: GraphQLSchema; type?: GraphQLNamedType }

Type declaration

  • argument: GraphQLArgument
  • Optional directive?: GraphQLDirective
  • Optional field?: GraphQLField<any, any>
  • kind: "Argument"
  • Optional schema?: GraphQLSchema
  • Optional type?: GraphQLNamedType

ArgumentReference

ArgumentReference: { argument: GraphQLArgument; directive?: GraphQLDirective; field?: GraphQLField<any, any>; kind: "Argument"; schema?: GraphQLSchema; type?: GraphQLNamedType }

Type declaration

  • argument: GraphQLArgument
  • Optional directive?: GraphQLDirective
  • Optional field?: GraphQLField<any, any>
  • kind: "Argument"
  • Optional schema?: GraphQLSchema
  • Optional type?: GraphQLNamedType

DirectiveReference

DirectiveReference: { directive: GraphQLDirective; kind: "Directive"; schema?: GraphQLSchema }

Type declaration

  • directive: GraphQLDirective
  • kind: "Directive"
  • Optional schema?: GraphQLSchema

DirectiveReference

DirectiveReference: { directive: GraphQLDirective; kind: "Directive"; schema?: GraphQLSchema }

Type declaration

  • directive: GraphQLDirective
  • kind: "Directive"
  • Optional schema?: GraphQLSchema

EnumValueReference

EnumValueReference: { kind: "EnumValue"; schema?: GraphQLSchema; type?: GraphQLEnumType; value?: GraphQLEnumValue }

Type declaration

  • kind: "EnumValue"
  • Optional schema?: GraphQLSchema
  • Optional type?: GraphQLEnumType
  • Optional value?: GraphQLEnumValue

EnumValueReference

EnumValueReference: { kind: "EnumValue"; schema?: GraphQLSchema; type?: GraphQLEnumType; value?: GraphQLEnumValue }

Type declaration

  • kind: "EnumValue"
  • Optional schema?: GraphQLSchema
  • Optional type?: GraphQLEnumType
  • Optional value?: GraphQLEnumValue

FieldReference

FieldReference: { field: GraphQLField<any, any>; kind: "Field"; schema?: GraphQLSchema; type: Maybe<GraphQLNamedType> }

Type declaration

  • field: GraphQLField<any, any>
  • kind: "Field"
  • Optional schema?: GraphQLSchema
  • type: Maybe<GraphQLNamedType>

FieldReference

FieldReference: { field: GraphQLField<any, any>; kind: "Field"; schema?: GraphQLSchema; type: Maybe<GraphQLNamedType> }

Type declaration

  • field: GraphQLField<any, any>
  • kind: "Field"
  • Optional schema?: GraphQLSchema
  • type: Maybe<GraphQLNamedType>

ParseValueOutput

ParseValueOutput: ParseTokenOutput | ParseObjectOutput | ParseArrayOutput | undefined

ParseValueOutput

ParseValueOutput: ParseTokenOutput | ParseObjectOutput | ParseArrayOutput | undefined

SchemaReference

SchemaReference

TypeReference

TypeReference: { kind: "Type"; schema?: GraphQLSchema; type: GraphQLNamedType }

Type declaration

  • kind: "Type"
  • Optional schema?: GraphQLSchema
  • type: GraphQLNamedType

TypeReference

TypeReference: { kind: "Type"; schema?: GraphQLSchema; type: GraphQLNamedType }

Type declaration

  • kind: "Type"
  • Optional schema?: GraphQLSchema
  • type: GraphQLNamedType

VariableToType

VariableToType: Record<string, GraphQLInputType>

VariableToType

VariableToType: Record<string, GraphQLInputType>

Variables

Const graphql

graphql: StreamParser<any>

Const graphql

graphql: StreamParser<any> = graphqlModeFactory({}) as unknown as StreamParser<any>

Functions

collectVariables

  • collectVariables(schema: GraphQLSchema, documentAST: DocumentNode): collectVariables

collectVariables

  • collectVariables(schema: GraphQLSchema, documentAST: DocumentNode): any
  • Parameters

    • schema: GraphQLSchema
    • documentAST: DocumentNode

    Returns any

forEachState

forEachState

  • forEachState(stack: State, fn: (state: State) => void): void
  • Parameters

    Returns void

getArgumentReference

  • Parameters

    • typeInfo: any

    Returns ArgumentReference

getArgumentReference

getDirectiveReference

  • Parameters

    • typeInfo: any

    Returns DirectiveReference

getDirectiveReference

getEnumValueReference

getEnumValueReference

getFieldReference

  • Parameters

    • typeInfo: any

    Returns FieldReference

getFieldReference

getTypeInfo

  • getTypeInfo(schema: GraphQLSchema, tokenState: State): TypeInfo
  • Parameters

    • schema: GraphQLSchema
    • tokenState: State

    Returns TypeInfo

getTypeInfo

getTypeReference

  • Parameters

    • typeInfo: any
    • Optional type: Maybe<GraphQLNamedType>

    Returns TypeReference

getTypeReference

hintList

  • hintList(cursor: Position, token: Token, list: IHint[]): IHints | undefined

hintList

  • hintList(cursor: Position, token: Token, list: IHint[]): IHints | undefined
  • Parameters

    • cursor: Position
    • token: Token
    • list: IHint[]

    Returns IHints | undefined

indent

  • indent(this: Mode<any> & { config?: CodeMirror.EditorConfiguration; electricInput?: RegExp }, state: State, textAfter: string): indent

indent

  • indent(this: Mode<any> & { config?: CodeMirror.EditorConfiguration; electricInput?: RegExp }, state: State, textAfter: string): number
  • Parameters

    • this: Mode<any> & { config?: CodeMirror.EditorConfiguration; electricInput?: RegExp }
    • state: State
    • textAfter: string

    Returns number

jsonParse

  • 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

    Parameters

    • str: string

    Returns jsonParse

jsonParse

  • Parameters

    • str: string

    Returns ParseObjectOutput

runParser

  • runParser(sourceText: string, parserOptions: ParserOptions, callbackFn: (stream: CharacterStream, state: State, style: string) => void): runParser

runParser

  • runParser(sourceText: string, parserOptions: ParserOptions, callbackFn: (stream: CharacterStream, state: State, style: string) => void): void
  • Parameters

    • sourceText: string
    • parserOptions: ParserOptions
    • callbackFn: (stream: CharacterStream, state: State, style: string) => void
        • (stream: CharacterStream, state: State, style: string): void
        • Parameters

          • stream: CharacterStream
          • state: State
          • style: string

          Returns void

    Returns void

Generated using TypeDoc