2.2.0 • Published 10 months ago

codemirror-graphql v2.2.0

Weekly downloads
133,807
License
MIT
Repository
github
Last release
10 months ago

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.

@italk/test1graphql-playground-react-auth@everything-registry/sub-chunk-1350swyx-graphiql@benjie/graphiql@prisma/prisma-admingraphiql-clouduigraphiql-custom-headersgraphiql-editorgraphiql-for-cruddlgraphiql-sudographgraphiql-tmgraphiqlwhistoryhasura-console-graphiqlhasura-console-graphiql-derivehskp-front-console-apigraphql-matchainsomnia-clilpdesignsystem@webscopeio/graphql-playground-react@the-gear/graphiql@tipe/graphql-flex@things-factory/modeller-ui@zhaor/graphiqlandrews-dashboardapollo-tripod@italk/parse-dashboard@handyai/playground@8base/graphiql@agilys/custom-graphiql@advinans/graphiql@altangent/graphiqlsuper-graphiqltsunammisgraphiql@cdmsmith/graphiql@cdmsmith/graphql-playground-reactwatchmowawhal-graphiql@langpavel/graphiql@nathanstitt/graphiql@scanshop/parse-dashboard@rearden/graphql-playground-react@readme/syntax-highlightermini-graphiqlparse-dashboard-tzppong87-graphql-playground-reactgraphql-playground-reactgraphql-playground-react-a11ywatchgraphql-playground-react-awsgraphql-playground-react-gitgraphql-playground-react-patchedgraphql-playground-react-shiftgraphql-playground-react-trackinggraphql-playground-react2graphql-playgroundbraphiqlfrinx-workflow-ui@soyjak/utils@slash-graphql/visual-schema-builder@arcblock/graphiql@arcblock/ocap-playground@apollographql/graphql-playground-react@dockite/admin@dockite/field-code@functionalfoundry/graphiql@o/graphiql@asany/components@expo/graphiql@olimsaidov/graphql-playground-react@jpruden/graphql-playground-react@qzchenwl/graphiql
2.2.0

10 months ago

2.1.1

1 year ago

2.1.0

1 year ago

2.0.13

1 year ago

2.0.12

1 year ago

2.0.11

2 years ago

2.0.10

2 years ago

2.0.9-alpha.1

2 years ago

2.0.9

2 years ago

2.0.9-alpha.0

2 years ago

2.0.7

2 years ago

2.0.6

2 years ago

2.0.8

2 years ago

2.0.5

3 years ago

2.0.4

3 years ago

2.0.3

3 years ago

2.0.2

3 years ago

2.0.1

3 years ago

2.0.0

3 years ago

2.0.0-next.2

3 years ago

2.0.0-next.0

3 years ago

2.0.0-next.1

3 years ago

1.3.2

3 years ago

1.3.1

3 years ago

1.2.17

4 years ago

1.3.0

3 years ago

1.2.13

4 years ago

1.2.16

4 years ago

1.2.14

4 years ago

1.2.15

4 years ago

1.2.8

4 years ago

1.2.7

4 years ago

1.2.6

4 years ago

1.2.5

4 years ago

1.2.12

4 years ago

1.2.10

4 years ago

1.2.11

4 years ago

1.2.9

4 years ago

1.2.0

4 years ago

1.2.4

4 years ago

1.2.3

4 years ago

1.2.2

4 years ago

1.2.1

4 years ago

1.1.0

4 years ago

1.0.3

4 years ago

1.0.2

4 years ago

1.0.1

5 years ago

1.0.0

5 years ago

0.15.0

5 years ago

0.15.1

5 years ago

0.15.2

5 years ago

0.14.0

5 years ago

0.13.1

5 years ago

0.13.0

5 years ago

0.12.4

5 years ago

0.12.3

5 years ago

0.12.2

5 years ago

0.12.2-alpha.2

5 years ago

0.12.2-alpha.1

5 years ago

0.12.2-alpha.0

5 years ago

0.12.1

5 years ago

0.12.0

5 years ago

0.12.0-alpha.11

5 years ago

0.12.0-alpha.9

5 years ago

0.12.0-alpha.8

5 years ago

0.12.0-alpha.6

6 years ago

0.12.0-alpha.7

6 years ago

0.12.0-alpha.5

6 years ago

0.12.0-alpha.4

6 years ago

0.12.0-alpha.3

6 years ago

0.12.0-alpha.0

6 years ago

0.12.0-alpha.1

6 years ago

0.11.6

6 years ago

0.11.5

6 years ago

0.11.4

6 years ago

0.11.3

6 years ago

0.11.2

6 years ago

0.11.1

6 years ago

0.9.0

6 years ago

0.8.3

7 years ago

0.8.2

7 years ago

0.7.1

7 years ago

0.6.12

8 years ago

0.6.11

8 years ago

0.6.10

8 years ago

0.6.9

8 years ago

0.6.8

8 years ago

0.6.7

8 years ago

0.6.6

8 years ago

0.6.5

8 years ago

0.6.4

8 years ago

0.6.3

9 years ago

0.6.2

9 years ago

0.6.1

9 years ago

0.6.0

9 years ago

0.5.9

9 years ago

0.5.8

9 years ago

0.5.7

9 years ago

0.5.6

9 years ago

0.5.5

9 years ago

0.5.4

9 years ago

0.5.3

9 years ago

0.5.2

9 years ago

0.5.1

9 years ago

0.5.0

10 years ago

0.3.1

10 years ago

0.3.0

10 years ago

0.2.2

10 years ago

0.2.1

10 years ago

0.2.0

10 years ago

0.1.1

10 years ago

0.1.0

10 years ago