feat: graphql-tag-pluck options (#1156)

* feat: implement config override * fix: tests working * fix: add basic and failing test * feat: work in progress custom tag test * fix: one test works without graphql-config, both fail with it * fix: test clsoer to working, having jest lifecycle issues * fix: tests working * fix: improving tests * feat: changeset * refactor for improving already good work 😍 Co-authored-by: Dimitri POSTOLOV <dmytropostolov@gmail.com>
dimaMachina · Sep 23, 2022 · 6ac42cf · 6ac42cf
1 parent 0d3fe5b
commit 6ac42cf
Show file tree

Hide file tree

Showing 5 changed files with 137 additions and 6 deletions.
diff --git a/.changeset/dirty-actors-decide.md b/.changeset/dirty-actors-decide.md
@@ -0,0 +1,6 @@
+---
+'@graphql-eslint/eslint-plugin': minor
+---
+
+Using configuration options for `graphql-tag-pluck` through `graphql-config`
+Allow setup custom `globalGqlIdentifierName`, `modules.identifier` and `gqlMagicComment`
diff --git a/packages/plugin/src/graphql-config.ts b/packages/plugin/src/graphql-config.ts
@@ -12,7 +12,7 @@ import { ParserOptions } from './types';
 const debug = debugFactory('graphql-eslint:graphql-config');
 let graphQLConfig: GraphQLConfig;
 
-export function loadGraphQLConfig(options: ParserOptions): GraphQLConfig {
+export function loadGraphQLConfig(options: ParserOptions = {}): GraphQLConfig {
   // We don't want cache config on test environment
   // Otherwise schema and documents will be same for all tests
   if (process.env.NODE_ENV !== 'test' && graphQLConfig) {

diff --git a/packages/plugin/src/processor.ts b/packages/plugin/src/processor.ts
@@ -1,12 +1,32 @@
-import type { Linter } from 'eslint';
-import { parseCode } from '@graphql-tools/graphql-tag-pluck';
+import { Linter } from 'eslint';
+import { parseCode, GraphQLTagPluckOptions } from '@graphql-tools/graphql-tag-pluck';
+import { asArray } from '@graphql-tools/utils';
+import { loadGraphQLConfig } from './graphql-config';
 
-type Block = Linter.ProcessorFile & {
+export type Block = Linter.ProcessorFile & {
   lineOffset: number;
   offset: number;
 };
 
-const RELEVANT_KEYWORDS = ['gql', 'graphql', '/* GraphQL */'] as const;
+const graphQLTagPluckOptions: GraphQLTagPluckOptions =
+  loadGraphQLConfig().getDefault()?.extensions?.graphqlTagPluck;
+
+const {
+  modules = [],
+  globalGqlIdentifierName = ['gql', 'graphql'],
+  gqlMagicComment = 'GraphQL',
+} = graphQLTagPluckOptions || {};
+
+const RELEVANT_KEYWORDS = [
+  ...new Set(
+    [
+      ...modules.map(({ identifier }) => identifier),
+      ...asArray(globalGqlIdentifierName),
+      gqlMagicComment,
+    ].filter(Boolean)
+  ),
+];
+
 const blocksMap = new Map<string, Block[]>();
 
 export const processor: Linter.Processor<Block | string> = {
@@ -19,8 +39,8 @@ export const processor: Linter.Processor<Block | string> = {
       code,
       filePath,
       options: {
-        globalGqlIdentifierName: ['gql', 'graphql'],
         skipIndent: true,
+        ...graphQLTagPluckOptions,
       },
     });
 

diff --git a/packages/plugin/tests/processor-with-graphql-config.spec.ts b/packages/plugin/tests/processor-with-graphql-config.spec.ts
@@ -0,0 +1,59 @@
+import { Block, processor } from '../src/processor';
+
+jest.mock('../src/graphql-config', () => ({
+  loadGraphQLConfig: jest.fn(() => ({
+    getDefault: () => ({
+      extensions: {
+        graphqlTagPluck: {
+          modules: [{ name: 'custom-gql-tag', identifier: 'custom' }],
+          gqlMagicComment: 'CustoM',
+        },
+      },
+    }),
+  })),
+}));
+
+describe('processor.preprocess() with graphql-config', () => {
+  const QUERY = 'query users { id }';
+  it('should find "custom" tag', () => {
+    const code = `
+      import { custom } from 'custom-gql-tag'
+      const fooQuery = custom\`${QUERY}\`
+    `;
+    const blocks = processor.preprocess(code, '') as Block[];
+
+    expect(blocks[0].text).toBe(QUERY);
+    expect(blocks).toMatchInlineSnapshot(`
+      Array [
+        Object {
+          filename: document.graphql,
+          lineOffset: 2,
+          offset: 77,
+          text: query users { id },
+        },
+        
+            import { custom } from 'custom-gql-tag'
+            const fooQuery = custom\`query users { id }\`
+          ,
+      ]
+    `);
+  });
+
+  it('should find /* CustoM */ magic comment', () => {
+    const code = `/*  CustoM  */ \`${QUERY}\``;
+    const blocks = processor.preprocess(code, '') as Block[];
+
+    expect(blocks[0].text).toBe(QUERY);
+    expect(blocks).toMatchInlineSnapshot(`
+      Array [
+        Object {
+          filename: document.graphql,
+          lineOffset: 0,
+          offset: 16,
+          text: query users { id },
+        },
+        /*  CustoM  */ \`query users { id }\`,
+      ]
+    `);
+  });
+});
diff --git a/packages/plugin/tests/processor-without-graphql-config.spec.ts b/packages/plugin/tests/processor-without-graphql-config.spec.ts
@@ -0,0 +1,46 @@
+import { Block, processor } from '../src/processor';
+
+describe('processor.preprocess() without graphql-config', () => {
+  const QUERY = 'query users { id }';
+  it('should find "gql" tag', () => {
+    const code = `
+      import { gql } from 'graphql'
+      const fooQuery = gql\`${QUERY}\`
+    `;
+    const blocks = processor.preprocess(code, '') as Block[];
+
+    expect(blocks[0].text).toBe(QUERY);
+    expect(blocks).toMatchInlineSnapshot(`
+      Array [
+        Object {
+          filename: document.graphql,
+          lineOffset: 2,
+          offset: 64,
+          text: query users { id },
+        },
+        
+            import { gql } from 'graphql'
+            const fooQuery = gql\`query users { id }\`
+          ,
+      ]
+    `);
+  });
+
+  it('should find /* GraphQL */ magic comment', () => {
+    const code = `/*  GraphQL  */ \`${QUERY}\``;
+    const blocks = processor.preprocess(code, '') as Block[];
+
+    expect(blocks[0].text).toBe(QUERY);
+    expect(blocks).toMatchInlineSnapshot(`
+      Array [
+        Object {
+          filename: document.graphql,
+          lineOffset: 0,
+          offset: 17,
+          text: query users { id },
+        },
+        /*  GraphQL  */ \`query users { id }\`,
+      ]
+    `);
+  });
+});