Add code file loader when using graphql-config (#231)

* Add custom loaders when using graphql-config

* 👌 only create loader instances once

* add changeset

Author: EmrysMyrddin

.changeset/tame-onions-wink.md

@@ -0,0 +1,5 @@
+---
+'@graphql-eslint/eslint-plugin': minor
+---
+
+Added code file compatibility for graphql-config projects

examples/graphql-config-code-file/.eslintrc.json

@@ -0,0 +1,19 @@
+{  
+  "processor": "@graphql-eslint/graphql",
+  "overrides": [
+    {
+      "files": ["*.graphql"],
+      "parser": "@graphql-eslint/eslint-plugin",
+      "parserOptions": {
+        "schema": "./**/schema.graphql"
+      },
+      "plugins": ["@graphql-eslint"],
+      "rules": {
+        "@graphql-eslint/require-id-when-available": "warn",
+        "@graphql-eslint/no-anonymous-operations": "warn",
+        "@graphql-eslint/no-operation-name-suffix": "error",
+        "@graphql-eslint/validate-against-schema": "error"
+      }
+    }
+  ]
+}

examples/graphql-config-code-file/graphql.config.yml

@@ -0,0 +1,2 @@
+schema: "./**/schema.graphql"
+documents: "./query.js"

examples/graphql-config-code-file/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "@graphql-eslint/example-graphql-config--code-file",
+  "private": true,
+  "version": "0.0.1",
+  "repository": "https://github.com/dotansimha/graphql-eslint",
+  "author": "Dotan Simha <[email protected]>",
+  "license": "MIT",
+  "scripts": {
+    "lint": "eslint --ext graphql,js ."
+  },
+  "dependencies": {
+    "@graphql-eslint/eslint-plugin": "0.6.0",
+    "eslint": "7.14.0",
+    "graphql": "15.4.0",
+    "graphql-tag": "^2.11.0",
+    "typescript": "4.1.2"
+  }
+}

examples/graphql-config-code-file/query.js

@@ -0,0 +1,9 @@
+import gql from 'graphql-tag'
+
+const myQuery = gql`
+  query {
+    user {
+      name
+    }
+  }
+`;

examples/graphql-config-code-file/schema.graphql

@@ -0,0 +1,8 @@
+type Query {
+  user: User!
+}
+
+type User {
+  id: ID!
+  name: String!
+}

packages/plugin/src/parser.ts

@@ -4,20 +4,27 @@ import { GraphQLError, TypeInfo } from 'graphql';
 import { Linter } from 'eslint';
 import { GraphQLESLintParseResult, ParserOptions } from './types';
 import { extractTokens } from './utils';
-import { getSchema } from './schema';
-import { getSiblingOperations } from './sibling-operations';
-import { loadConfigSync, GraphQLConfig } from 'graphql-config';
+import { getSchema, schemaLoaders } from './schema';
+import { getSiblingOperations, operationsLoaders } from './sibling-operations';
+import { loadConfigSync, GraphQLConfig, GraphQLExtensionDeclaration } from 'graphql-config';
 
 export function parse(code: string, options?: ParserOptions): Linter.ESLintParseResult['ast'] {
   return parseForESLint(code, options).ast;
 }
 
+const addCodeFileLoaderExtension: GraphQLExtensionDeclaration = (api) => {
+  schemaLoaders.forEach(loader => api.loaders.schema.register(loader))
+  operationsLoaders.forEach(loader => api.loaders.documents.register(loader))
+  return { name: 'graphql-eslint-loaders' }
+}
+
 export function parseForESLint(code: string, options?: ParserOptions): GraphQLESLintParseResult {
   const gqlConfig: GraphQLConfig | null = options?.skipGraphQLConfig
     ? null
     : loadConfigSync({
         throwOnEmpty: false,
         throwOnMissing: false,
+        extensions: [addCodeFileLoaderExtension]
       });
 
   const schema = getSchema(options, gqlConfig);

packages/plugin/src/schema.ts

@@ -2,13 +2,29 @@ import { GraphQLFileLoader } from '@graphql-tools/graphql-file-loader';
 import { JsonFileLoader } from '@graphql-tools/json-file-loader';
 import { loadSchemaSync } from '@graphql-tools/load';
 import { UrlLoader } from '@graphql-tools/url-loader';
+import { Loader, SingleFileOptions } from '@graphql-tools/utils';
 import { buildSchema, GraphQLSchema } from 'graphql';
 import { GraphQLConfig } from 'graphql-config';
 import { dirname } from 'path';
 import { ParserOptions } from './types';
 
 const schemaCache: Map<string, GraphQLSchema> = new Map();
 
+export const schemaLoaders: Loader<string, SingleFileOptions>[] = [
+  {
+    loaderId: () => 'direct-string',
+    canLoad: async () => false,
+    load: async () => null,
+    canLoadSync: pointer => typeof pointer === 'string' && pointer.includes('type '),
+    loadSync: pointer => ({
+      schema: buildSchema(pointer),
+    }),
+  },
+  new GraphQLFileLoader(),
+  new JsonFileLoader(),
+  new UrlLoader(),
+]
+
 export function getSchema(options: ParserOptions, gqlConfig: GraphQLConfig): GraphQLSchema | null {
   let schema: GraphQLSchema | null = null;
 
@@ -44,20 +60,7 @@ export function getSchema(options: ParserOptions, gqlConfig: GraphQLConfig): Gra
         schema = loadSchemaSync(options.schema, {
           ...(options.schemaOptions || {}),
           assumeValidSDL: true,
-          loaders: [
-            {
-              loaderId: () => 'direct-string',
-              canLoad: async () => false,
-              load: async () => null,
-              canLoadSync: pointer => typeof pointer === 'string' && pointer.includes('type '),
-              loadSync: pointer => ({
-                schema: buildSchema(pointer),
-              }),
-            },
-            new GraphQLFileLoader(),
-            new JsonFileLoader(),
-            new UrlLoader(),
-          ],
+          loaders: schemaLoaders,
         });
         schemaCache.set(schemaKey, schema);
       } catch (e) {

packages/plugin/src/sibling-operations.ts

@@ -1,7 +1,7 @@
 import { GraphQLFileLoader } from '@graphql-tools/graphql-file-loader';
 import { CodeFileLoader } from '@graphql-tools/code-file-loader';
 import { loadDocumentsSync } from '@graphql-tools/load';
-import { Source } from '@graphql-tools/utils';
+import { Loader, SingleFileOptions, Source } from '@graphql-tools/utils';
 import {
   FragmentDefinitionNode,
   FragmentSpreadNode,
@@ -18,6 +18,20 @@ import { dirname, join } from 'path';
 export type FragmentSource = { filePath: string; document: FragmentDefinitionNode };
 export type OperationSource = { filePath: string; document: OperationDefinitionNode };
 
+export const operationsLoaders: Loader<string, SingleFileOptions>[] = [
+  new GraphQLFileLoader(),
+  new CodeFileLoader(),
+  {
+    loaderId: () => 'direct-string',
+    canLoad: async () => false,
+    load: async () => null,
+    canLoadSync: pointer => typeof pointer === 'string' && pointer.includes('type '),
+    loadSync: pointer => ({
+      document: parse(pointer),
+    }),
+  },
+]
+
 export type SiblingOperations = {
   available: boolean;
   getOperations(): OperationSource[];
@@ -35,19 +49,7 @@ export type SiblingOperations = {
 function loadSiblings(baseDir: string, loadPaths: string[]): Source[] {
   return loadDocumentsSync(loadPaths, {
     cwd: baseDir,
-    loaders: [
-      new GraphQLFileLoader(),
-      new CodeFileLoader(),
-      {
-        loaderId: () => 'direct-string',
-        canLoad: async () => false,
-        load: async () => null,
-        canLoadSync: pointer => typeof pointer === 'string' && pointer.includes('type '),
-        loadSync: pointer => ({
-          document: parse(pointer),
-        }),
-      },
-    ],
+    loaders: operationsLoaders,
   }).map(r => ({ ...r, location: join(baseDir, r.location) }));
 }