Support matching template literals which are declared 'as const' (#4877)

* Support matching template literals which are declared 'as const' * Add changeset --------- Co-authored-by: Tristan Menzel <tristanmenzel@gmail.com>
ardatan · Feb 13, 2023 · 42ad8df · 42ad8df
1 parent 6a1f239
commit 42ad8df
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 2 deletions.
diff --git a/.changeset/weak-tomatoes-act.md b/.changeset/weak-tomatoes-act.md
@@ -0,0 +1,5 @@
+---
+'@graphql-tools/graphql-tag-pluck': minor
+---
+
+Adds support for matching graphql queries declared with typescript's 'as const' expression. eg. graphql(`query myQuery(...)` as const)
diff --git a/packages/graphql-tag-pluck/src/visitor.ts b/packages/graphql-tag-pluck/src/visitor.ts
@@ -6,6 +6,9 @@ import {
   isTemplateLiteral,
   isImportDefaultSpecifier,
   isImportSpecifier,
+  isTSAsExpression,
+  isTSTypeReference,
+  TSAsExpression,
 } from '@babel/types';
 import { asArray } from '@graphql-tools/utils';
 import { Visitor } from '@babel/traverse';
@@ -261,10 +264,28 @@ export default (code: string, out: any, options: GraphQLTagPluckOptions = {}) =>
           return;
         }
 
+        // Checks to see if a node represents a typescript '<expression> as const' expression
+        function isTSAsConstExpression(node: object | null | undefined): node is TSAsExpression {
+          return (
+            isTSAsExpression(node) &&
+            isTSTypeReference(node.typeAnnotation) &&
+            isIdentifier(node.typeAnnotation.typeName) &&
+            node.typeAnnotation.typeName.name === 'const'
+          );
+        }
+
+        // Extract template literal from as const expression if applicable
+        // e.g. gql(`query myQuery {}` as const)
+        const unwrappedExpression = isTSAsConstExpression(arg0) ? arg0.expression : arg0;
+
         // Push strings template literals to gql calls
         // e.g. gql(`query myQuery {}`) -> query myQuery {}
-        if (isIdentifier(path.node.callee) && isValidIdentifier(path.node.callee.name) && isTemplateLiteral(arg0)) {
-          const { start, end, loc } = arg0;
+        if (
+          isIdentifier(path.node.callee) &&
+          isValidIdentifier(path.node.callee.name) &&
+          isTemplateLiteral(unwrappedExpression)
+        ) {
+          const { start, end, loc } = unwrappedExpression;
           if (start != null && end != null && start != null && loc != null) {
             const gqlTemplateLiteral = pluckStringFromFile({ start, end });
 

diff --git a/packages/graphql-tag-pluck/tests/graphql-tag-pluck.test.ts b/packages/graphql-tag-pluck/tests/graphql-tag-pluck.test.ts
@@ -230,6 +230,44 @@ describe('graphql-tag-pluck', () => {
       );
     });
 
+    it("should pluck graphql template literals from .ts that use an 'as const' assertion", async () => {
+      const sources = await pluck(
+        'tmp-XXXXXX.ts',
+        freeText(`
+        import { graphql } from '../somewhere'
+        import { Document } from 'graphql'
+
+        const fragment: Document = graphql(\`
+            fragment Foo on FooType {
+              id
+            }
+          \`as const)
+
+          const doc: Document = graphql(\`
+            query foo {
+              foo {
+                ...Foo
+              }
+            }
+            \` as const)
+      `)
+      );
+
+      expect(sources.map(source => source.body).join('\n\n')).toEqual(
+        freeText(`
+        fragment Foo on FooType {
+          id
+        }
+
+        query foo {
+          foo {
+            ...Foo
+          }
+        }
+      `)
+      );
+    });
+
     it('should pluck graphql-tag template literals from .ts file', async () => {
       const sources = await pluck(
         'tmp-XXXXXX.ts',