1 | # GraphQL mode for CodeMirror
|
2 |
|
3 | [![NPM](https://img.shields.io/npm/v/codemirror-graphql.svg?style=flat-square)](https://npmjs.com/codemirror-graphql)
|
4 | ![npm downloads](https://img.shields.io/npm/dm/codemirror-graphql?label=npm%20downloads)
|
5 | [![License](https://img.shields.io/npm/l/codemirror-graphql.svg?style=flat-square)](LICENSE)
|
6 | [Discord Channel](https://discord.gg/cffZwk8NJW)
|
7 |
|
8 | Provides CodeMirror with a parser mode for GraphQL along with a live linter and
|
9 | typeahead hinter powered by your GraphQL Schema.
|
10 |
|
11 | ![Demo .gif of GraphQL Codemirror Mode](https://raw.githubusercontent.com/graphql/graphiql/main/packages/codemirror-graphql/resources/example.gif)
|
12 |
|
13 | ### Getting Started
|
14 |
|
15 | ```sh
|
16 | npm install --save codemirror-graphql
|
17 | ```
|
18 |
|
19 | CodeMirror helpers install themselves to the global CodeMirror when they
|
20 | are imported.
|
21 |
|
22 | ```js
|
23 | import type { ValidationContext, SDLValidationContext } from 'graphql';
|
24 |
|
25 | import CodeMirror from 'codemirror';
|
26 | import 'codemirror/addon/hint/show-hint';
|
27 | import 'codemirror/addon/lint/lint';
|
28 | import 'codemirror-graphql/hint';
|
29 | import 'codemirror-graphql/lint';
|
30 | import 'codemirror-graphql/mode';
|
31 |
|
32 | CodeMirror.fromTextArea(myTextarea, {
|
33 | mode: 'graphql',
|
34 | lint: {
|
35 | schema: myGraphQLSchema,
|
36 | validationRules: [ExampleRule],
|
37 | },
|
38 | hintOptions: {
|
39 | schema: myGraphQLSchema,
|
40 | },
|
41 | });
|
42 | ```
|
43 |
|
44 | ## External Fragments Example
|
45 |
|
46 | If you want to have autocompletion for external fragment definitions, there's a new configuration setting available
|
47 |
|
48 | ```ts
|
49 | import CodeMirror from 'codemirror';
|
50 | import 'codemirror/addon/hint/show-hint';
|
51 | import 'codemirror/addon/lint/lint';
|
52 | import 'codemirror-graphql/hint';
|
53 | import 'codemirror-graphql/lint';
|
54 | import 'codemirror-graphql/mode';
|
55 |
|
56 | const externalFragments = `
|
57 | fragment MyFragment on Example {
|
58 | id: ID!
|
59 | name: String!
|
60 | }
|
61 | fragment AnotherFragment on Example {
|
62 | id: ID!
|
63 | title: String!
|
64 | }
|
65 | `;
|
66 |
|
67 | CodeMirror.fromTextArea(myTextarea, {
|
68 | mode: 'graphql',
|
69 | lint: {
|
70 | schema: myGraphQLSchema,
|
71 | },
|
72 | hintOptions: {
|
73 | schema: myGraphQLSchema,
|
74 | // here we use a string, but
|
75 | // you can also provide an array of FragmentDefinitionNodes
|
76 | externalFragments,
|
77 | },
|
78 | });
|
79 | ```
|
80 |
|
81 | ### Custom Validation Rules
|
82 |
|
83 | If you want to show custom validation, you can do that too! It uses the `ValidationRule` interface.
|
84 |
|
85 | ```js
|
86 | import type { ValidationRule } from 'graphql';
|
87 |
|
88 | import CodeMirror from 'codemirror';
|
89 | import 'codemirror/addon/hint/show-hint';
|
90 | import 'codemirror/addon/lint/lint';
|
91 | import 'codemirror-graphql/hint';
|
92 | import 'codemirror-graphql/lint';
|
93 | import 'codemirror-graphql/mode';
|
94 |
|
95 | const ExampleRule: ValidationRule = context => {
|
96 | // your custom rules here
|
97 | const schema = context.getSchema();
|
98 | const document = context.getDocument();
|
99 | return {
|
100 | NamedType(node) {
|
101 | if (node.name.value !== node.name.value.toLowercase()) {
|
102 | context.reportError('only lowercase type names allowed!');
|
103 | }
|
104 | },
|
105 | };
|
106 | };
|
107 |
|
108 | CodeMirror.fromTextArea(myTextarea, {
|
109 | mode: 'graphql',
|
110 | lint: {
|
111 | schema: myGraphQLSchema,
|
112 | validationRules: [ExampleRule],
|
113 | },
|
114 | hintOptions: {
|
115 | schema: myGraphQLSchema,
|
116 | },
|
117 | });
|
118 | ```
|
119 |
|
120 | Build for the web with [webpack](http://webpack.github.io/) or
|
121 | [browserify](http://browserify.org/).
|