Skip to content

Commit f4d41b1

Browse files
authored
Docs: Enhance basic config instructions. (#771)
* Enhance basic configuration instructions. * Explain how to add rules that apply across the schema. * Make fixes from PR review.
1 parent c837c99 commit f4d41b1

File tree

1 file changed

+66
-20
lines changed

1 file changed

+66
-20
lines changed

README.md

Lines changed: 66 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,11 @@ npm install --save-dev @graphql-eslint/eslint-plugin
4646
4747
### Configuration
4848

49-
To get started, create an override configuration for your ESLint, while applying it to `.graphql` files (do that even if you are declaring your operations in code files):
49+
#### Tell ESLint to apply this plugin to `.graphql` files.
50+
51+
_This step is necessary even if you are declaring operations and/or schema in code files._
52+
53+
To get started, define an override in your ESLint config to tell ESLint to modify the way it treats `.graphql` files. Add the [rules](./docs/README.md) you want applied.
5054

5155
```json
5256
{
@@ -56,56 +60,95 @@ To get started, create an override configuration for your ESLint, while applying
5660
"parser": "@graphql-eslint/eslint-plugin",
5761
"plugins": ["@graphql-eslint"],
5862
"rules": {
59-
...
63+
"@graphql-eslint/require-description": [
64+
"error",
65+
{
66+
"on": [
67+
"ObjectTypeDefinition",
68+
"InterfaceTypeDefinition",
69+
"EnumTypeDefinition",
70+
"InputObjectTypeDefinition",
71+
"UnionTypeDefinition",
72+
"FieldDefinition",
73+
"DirectiveDefinition",
74+
],
75+
},
76+
],
6077
}
6178
}
6279
]
6380
}
6481
```
6582

66-
If you are using code files to store your GraphQL schema or your GraphQL operations, you can extend the behaviour of ESLint and extract those, by adding **an additional `override`** that does that extraction processes:
83+
If your GraphQL definitions are defined only in `.graphql` files and you're only using rules that apply to individual files, you should be good to go 👍 . If you would like use a remote schema or use rules that apply across the entire collection of definitions at once, see [here](#using-rules-with-constraints-that-span-the-entire-schema).
6784

68-
```json
85+
#### Tell ESLint to apply this plugin to GraphQL definitions defined in code files.
86+
87+
If you are defining GraphQL schema or GraphQL operations in code files, you'll want to define an additional override to extend the functionality of this plugin to the schema and operations in those files.
88+
89+
```diff
6990
{
7091
"overrides": [
71-
{
72-
"files": ["*.tsx", "*.ts", "*.jsx", "*.js"],
73-
"processor": "@graphql-eslint/graphql"
74-
},
92+
+ {
93+
+ "files": ["*.tsx", "*.ts", "*.jsx", "*.js"],
94+
+ "processor": "@graphql-eslint/graphql"
95+
+ },
7596
{
7697
"files": ["*.graphql"],
7798
"parser": "@graphql-eslint/eslint-plugin",
7899
"plugins": ["@graphql-eslint"],
79100
"rules": {
80-
...
101+
"@graphql-eslint/require-description": [
102+
"error",
103+
{
104+
"on": [
105+
"ObjectTypeDefinition",
106+
"InterfaceTypeDefinition",
107+
"EnumTypeDefinition",
108+
"InputObjectTypeDefinition",
109+
"UnionTypeDefinition",
110+
"FieldDefinition",
111+
"DirectiveDefinition",
112+
],
113+
},
114+
],
81115
}
82116
}
83117
]
84118
}
85119
```
86120

87-
#### Extended linting rules with GraphQL Schema
121+
Under the hood, specifying the `@graphql-eslint/graphql` processor for code files will cause `graphql-eslint/graphql` to extract the schema and operation definitions from these files into virtual GraphQL documents with `.graphql` extensions. This will allow the overrides you've defined for `.graphql` files, via `files: ["*.graphql"]`, to get applied to the definitions defined in your code files.
88122

89-
If you are using [`graphql-config`](https://graphql-config.com/) - you are good to go. This package integrates with it automatically, and will use it to load your schema!
123+
#### Using a remote schema or rules with constraints that span the entire schema.
90124

91-
Linting process can be enriched and extended with GraphQL type information, if you are able to provide your GraphQL schema.
125+
Some rules require an understanding of the entire schema at once. For example, [no-unreachable-types](https://github.com/dotansimha/graphql-eslint/blob/master/docs/rules/no-unreachable-types.md#no-unreachable-types) checks that all types are reachable by root-level fields.
92126

93-
The parser allow you to specify a json file / graphql files(s) / url / raw string to locate your schema (We are using `graphql-tools` to do that). Just add `parserOptions.schema` to your configuration file:
127+
To use these rules, you'll need to tell ESLint how to identify the entire set of schema definitions.
94128

95-
```json
129+
If you are using [`graphql-config`](https://graphql-config.com/), you are good to go. `graphql-eslint` integrates with it automatically and will use it to load your schema!
130+
131+
Alternatively, you can define `parserOptions.schema` in the `*.graphql` override in your ESLint config.
132+
133+
The parser allows you to specify a json file / graphql files(s) / url / raw string to locate your schema (We are using `graphql-tools` to do that). Just add `parserOptions.schema` to your configuration file:
134+
135+
```diff
96136
{
97137
"files": ["*.graphql"],
98138
"parser": "@graphql-eslint/eslint-plugin",
99139
"plugins": ["@graphql-eslint"],
100-
"parserOptions": {
101-
"schema": "./schema.graphql"
102-
}
140+
"rules": {
141+
"no-unused-types": ["error"]
142+
},
143+
+ "parserOptions": {
144+
+ "schema": "./schema.graphql"
145+
+ }
103146
}
104147
```
105148

106149
> You can find a complete [documentation of the `parserOptions` here](./docs/parser-options.md)
107150
108-
> Some rules requires type information to operate, it's marked in the docs of each plugin!
151+
> Some rules requires type information to operate, it's marked in the docs for each rule!
109152
110153
#### Extended linting rules with siblings operations
111154

@@ -117,13 +160,16 @@ To workaround that, we allow you to provide additional information on your Graph
117160

118161
To provide that, we are using `@graphql-tools` loaders to load your sibling operations and fragments, just specify a glob expression(s) that points to your code/.graphql files:
119162

120-
```json
163+
```diff
121164
{
122165
"files": ["*.graphql"],
123166
"parser": "@graphql-eslint/eslint-plugin",
124167
"plugins": ["@graphql-eslint"],
168+
"rules": {
169+
"unique-operation-name": ["error"]
170+
},
125171
"parserOptions": {
126-
"operations": ["./src/**/*.graphql"],
172+
+ "operations": ["./src/**/*.graphql"],
127173
"schema": "./schema.graphql"
128174
}
129175
}

0 commit comments

Comments
 (0)