Options
All
  • Public
  • Public/Protected
  • All
Menu

Package codemirror-graphql

GraphQL mode for CodeMirror

NPM npm downloads License Discord Channel

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 --save 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 autcompletion 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 = `
  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>

Functions

collectVariables

  • collectVariables(schema: GraphQLSchema, documentAST: DocumentNode): any
  • Provided a schema and a document, produces a variableToType Object.

    Parameters

    • schema: GraphQLSchema
    • documentAST: DocumentNode

    Returns any

collectVariables

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

    • schema: GraphQLSchema
    • documentAST: DocumentNode

    Returns any

forEachState

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

    Returns void

forEachState

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

    Returns void

getArgumentReference

  • Parameters

    • typeInfo: any

    Returns ArgumentReference

getArgumentReference

  • Parameters

    • typeInfo: any

    Returns ArgumentReference

getDirectiveReference

  • Parameters

    • typeInfo: any

    Returns DirectiveReference

getDirectiveReference

  • Parameters

    • typeInfo: any

    Returns DirectiveReference

getEnumValueReference

getEnumValueReference

getFieldReference

  • Parameters

    • typeInfo: any

    Returns FieldReference

getFieldReference

  • Parameters

    • typeInfo: any

    Returns FieldReference

getTypeInfo

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

    • schema: GraphQLSchema
    • tokenState: State

    Returns TypeInfo

getTypeInfo

  • getTypeInfo(schema: GraphQLSchema, tokenState: State): TypeInfo
  • Utility for collecting rich type information given any token's state from the graphql-mode parser.

    Parameters

    • schema: GraphQLSchema
    • tokenState: State

    Returns TypeInfo

getTypeReference

  • Parameters

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

    Returns TypeReference

getTypeReference

  • Parameters

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

    Returns TypeReference

hintList

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

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

    Returns IHints | undefined

hintList

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

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

    Returns IHints | undefined

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 ParseObjectOutput

jsonParse

  • Parameters

    • str: string

    Returns ParseObjectOutput

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

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