Codemirror-graphql NPM | npm.io

2.2.0 • Published 10 months ago

Install

Weekly downloads

133,807

License

MIT

Repository

Last release

10 months ago

GraphQL mode for CodeMirror

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

@types/codemirror graphql-language-service

@italk/test1 graphql-playground-react-auth @everything-registry/sub-chunk-1350 swyx-graphiql @benjie/graphiql @prisma/prisma-admin graphiql-cloudui graphiql-custom-headers graphiql-editor graphiql-for-cruddl graphiql-sudograph graphiql-tm graphiqlwhistory hasura-console-graphiql hasura-console-graphiql-derive hskp-front-console-api graphql-matcha insomnia-cli lpdesignsystem @webscopeio/graphql-playground-react @the-gear/graphiql @tipe/graphql-flex @things-factory/modeller-ui @zhaor/graphiql andrews-dashboard apollo-tripod @italk/parse-dashboard @handyai/playground @8base/graphiql @agilys/custom-graphiql @advinans/graphiql @altangent/graphiql super-graphiql tsunammisgraphiql @cdmsmith/graphiql @cdmsmith/graphql-playground-react watchmo wawhal-graphiql @langpavel/graphiql @nathanstitt/graphiql @scanshop/parse-dashboard @rearden/graphql-playground-react @readme/syntax-highlighter mini-graphiql parse-dashboard-tz ppong87-graphql-playground-react graphql-playground-react graphql-playground-react-a11ywatch graphql-playground-react-aws graphql-playground-react-git graphql-playground-react-patched graphql-playground-react-shift graphql-playground-react-tracking graphql-playground-react2 graphql-playground braphiql frinx-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-canary-3b3e5e21.0

10 months ago

10 months ago

2.2.0-canary-c3c3b243.0

10 months ago

2.2.0-canary-684cf0c6.0

10 months ago

2.2.0-canary-c5e2d5dd.0

10 months ago

2.2.0-canary-9632bdb2.0

10 months ago

2.2.0-canary-1cba8977.0

10 months ago

2.2.0-canary-431d8a9b.0

10 months ago

2.3.0-canary-95182bb1.0

10 months ago

2.1.2-canary-62b238a6.0

12 months ago

2.2.0-canary-e8982f7d.0

1 year ago

1 year ago

2.1.1-canary-52a5839f.0

1 year ago

1 year ago

1 year ago

2.0.13-canary-92c2fc51.0

1 year ago

2.0.13-canary-8432eb69.0

1 year ago

2.0.12-canary-1e0022eb.0

1 year ago

1 year ago

2 years ago

2.0.11-canary-36f0bac1.0

2 years ago

3.0.0-canary-d86e51b8.0

2 years ago

3.0.0-canary-6ba9ba38.0

2 years ago

3.0.0-canary-30653157.0

2 years ago

3.0.0-canary-9eb9e2fb.0

2 years ago

3.0.0-canary-d38d8126.0

2 years ago

3.0.0-canary-dfb20ee6.0

2 years ago

2 years ago

3.0.0-canary-a9e38be1.0

2 years ago

3.0.0-canary-298f53ab.0

2 years ago

3.0.0-canary-e0e2c15a.0

2 years ago

3.0.0-canary-f5830f58.0

2 years ago

3.0.0-canary-2b03fdd0.0

2 years ago

3.0.0-canary-cd4cdaba.0

2 years ago

3.0.0-canary-de420cd7.0

2 years ago

3.0.0-canary-3e72a1f9.0

2 years ago

3.0.0-canary-6610f112.0

2 years ago

3.0.0-canary-38c2c299.0

2 years ago

3.0.0-canary-344df134.0

2 years ago

3.0.0-canary-b5674a4f.0

2 years ago

3.0.0-canary-a08e9aea.0

2 years ago

3.0.0-canary-6de7e53f.0

2 years ago

3.0.0-canary-d52fbc57.0

2 years ago

3.0.0-canary-5d4865df.0

2 years ago

3.0.0-canary-351ba549.0

2 years ago

3.0.0-canary-a6d20235.0

2 years ago

3.0.0-canary-f648417e.0

2 years ago

3.0.0-canary-d4eae891.0

2 years ago

3.0.0-canary-6bb88229.0

2 years ago

3.0.0-canary-f0f5afb3.0

2 years ago

2.0.10-canary-df664982.0

2 years ago

2.0.10-canary-943fcbde.0

2 years ago

2.0.10-canary-73a4ac55.0

2 years ago

2.0.10-canary-6698dc22.0

2 years ago

2.0.10-canary-0b758ed3.0

2 years ago

2.0.10-canary-2f7f1266.0

2 years ago

2.0.10-canary-8d17bd3c.0

2 years ago

2.0.10-canary-8cc6cc6c.0

2 years ago

2 years ago

2.0.10-canary-88c53ea4.0

2 years ago

2.0.10-canary-70c9456e.0

2 years ago

2.0.10-canary-616f8a33.0

2 years ago

2.0.10-canary-b6d81c61.0

2 years ago

2 years ago

2.0.10-canary-8f7aa55c.0

2 years ago

2.0.10-canary-a8496344.0

2 years ago

2.0.10-canary-5a3b95d3.0

2 years ago

2.0.10-canary-f5992ff0.0

2 years ago

2.0.10-canary-0ef186a2.0

2 years ago

2.0.10-canary-a97151b3.0

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

2.0.0-canary-ac702ca1.0

3 years ago

2.0.0-canary-83929227.0

3 years ago

1.3.3-canary-0ac0349e.0

3 years ago

2.0.0-canary-6e4eb012.0

3 years ago

2.0.0-canary-e44ce665.0

3 years ago

3 years ago

2.0.0-canary-18e7a9b0.0

3 years ago

2.0.0-canary-1776f219.0

3 years ago

2.0.0-canary-e4e57679.0

3 years ago

2.0.0-canary-8f79c250.0

3 years ago

2.0.0-canary-96b6e4e7.0

3 years ago

2.0.0-canary-d00bc52e.0

3 years ago

2.0.0-canary-d3fbaaa4.0

3 years ago

2.0.0-canary-041744de.0

3 years ago

2.0.0-canary-6714df3b.0

3 years ago

2.0.0-canary-8cbe2521.0

3 years ago

2.0.0-canary-80402dea.0

3 years ago

2.0.0-canary-f9ccca99.0

3 years ago

2.0.0-canary-a106e5bf.0

3 years ago

2.0.0-canary-9c49e142.0

3 years ago

3 years ago

3 years ago

3 years ago

2.0.0-canary-fd0348c2.0

3 years ago

2.0.0-canary-47e02769.0

3 years ago

2.0.0-canary-2a5c10ce.0

3 years ago

2.0.0-canary-cc334b8a.0

3 years ago

2.0.0-canary-168ea3d5.0

3 years ago

2.0.0-canary-dda1cf54.0

3 years ago

2.0.0-canary-93a7238c.0

3 years ago

2.0.0-canary-e5dcaa31.0

3 years ago

2.0.0-canary-a5905d1c.0

3 years ago

2.0.0-canary-fdc1dadd.0

3 years ago

1.3.2-canary-4bf7a139.0

3 years ago

3 years ago

3 years ago

4 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

1.2.14-canary-9e6d341c.0

4 years ago

1.2.15-canary-e0939150.0

4 years ago

1.2.13-canary-8fa698e7.0

4 years ago

1.2.16-canary-63a8a0dd.0

4 years ago

1.2.16-canary-fb52a553.0

4 years ago

4 years ago

4 years ago

4 years ago

1.2.8-canary-166ffd7a.0

4 years ago

4 years ago

1.2.5-canary-6f6c49b0.0

4 years ago

1.2.6-canary-fae7d199.0

4 years ago

1.2.5-canary-58e99aa6.0

4 years ago

1.2.6-canary-8af33604.0

4 years ago

1.2.6-canary-343f1670.0

4 years ago

4 years ago

4 years ago

4 years ago

1.2.8-canary-bdd62cc3.0

4 years ago

1.2.8-canary-742288e7.0

4 years ago

1.2.5-canary-fea49557.0

4 years ago

1.2.10-canary-b8d145d7.0

4 years ago

1.2.5-canary-412904c6.0

4 years ago

1.2.10-canary-b96f3d10.0

4 years ago

1.2.8-canary-35604620.0

4 years ago

1.2.6-canary-aba5a940.0

4 years ago

4 years ago

1.2.5-canary-8ce9e283.0

4 years ago

1.2.6-canary-0b6fa337.0

4 years ago

1.2.11-canary-05b863ab.0

4 years ago

1.2.6-canary-321acad7.0

4 years ago

1.2.6-canary-033a43d2.0

4 years ago

1.2.6-canary-0d171c9c.0

4 years ago

1.2.6-canary-1a140c54.0

4 years ago

1.2.8-canary-b9c71c81.0

4 years ago

1.2.9-canary-75bdc860.0

4 years ago

1.2.6-canary-b5aba87e.0

4 years ago

1.2.8-canary-2f2c1b4d.0

4 years ago

1.2.5-canary-48f9cb01.0

4 years ago

1.2.6-canary-eb5c4300.0

4 years ago

1.2.8-canary-a19d0748.0

4 years ago

1.2.8-canary-07e866d1.0

4 years ago

1.2.9-canary-5edec51e.0

4 years ago

1.2.8-canary-ec866cba.0

4 years ago

1.2.7-canary-75700e01.0

4 years ago

1.2.8-canary-ab0be4f0.0

4 years ago

1.2.10-canary-312f863b.0

4 years ago

1.2.6-canary-1d118d28.0

4 years ago

1.2.9-canary-f20fe1e2.0

4 years ago

1.2.5-canary-325c04b9.0

4 years ago

1.2.8-canary-07a2840d.0

4 years ago

4 years ago

1.2.1-canary-98364dae.0

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

1.1.1-canary-dcd21ef1.0

4 years ago

1.1.1-canary-86c05353.0

4 years ago

1.2.1-canary-3410d799.0

4 years ago

1.1.1-canary-669af9ec.0

4 years ago

1.2.4-canary-1d1d33de.0

4 years ago

1.1.1-canary-86d7df95.0

4 years ago

4 years ago

1.2.5-canary-3dcdd158.0

4 years ago

1.2.3-canary-31c6631b.0

4 years ago

1.1.1-canary-efc41fcd.0

4 years ago

1.1.1-canary-26511707.0

4 years ago

1.1.1-canary-66346cbd.0

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

0.12.0-alpha.11

5 years ago

5 years ago

5 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

7 years ago

7 years ago

7 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago