Should pluck graphql-tag template literals from .tsx file with generi…

…c jsx elements

src/graphql-tag-pluck.test.js

@@ -196,6 +196,53 @@ describe('graphql-tag-pluck', () => {
     `))
   })
 
+  it('should pluck graphql-tag template literals from .tsx file with generic jsx elements', async () => {
+    const file = await tmp.file({
+      unsafeCleanup: true,
+      template: '/tmp/tmp-XXXXXX.tsx',
+    })
+
+    await fs.writeFile(file.name, freeText(`
+      import * as React from 'react';
+      import gql from 'graphql-tag';
+      import Generic from './Generic'
+
+      export default class extends React.Component<{}, {}> {
+        public render() {
+          return (
+            <div>
+              <Generic<string, number> />
+              <Generic<undefined> />
+              <Generic<null> />
+            </div>
+          )
+        }
+      }
+
+      export const pageQuery = gql\`
+        query IndexQuery {
+          site {
+            siteMetadata {
+              title
+            }
+          }
+        }
+      \`;
+    `))
+
+    const gqlString = await gqlPluck.fromFile(file.name)
+
+    expect(gqlString).toEqual(freeText(`
+      query IndexQuery {
+        site {
+          siteMetadata {
+            title
+          }
+        }
+      }
+    `))
+  })
+
   it('should pluck graphql-tag template literals from .ts file with the same const inside namespace and outside namespace', async () => {
     const file = await tmp.file({
       unsafeCleanup: true,

src/libs/babel.js

@@ -11,7 +11,9 @@ export const parse = (code, config) => {
     code = ts.transpileModule(code, {
       compilerOptions: {
         target: ts.ScriptTarget.ES2018,
-        jsx: config.plugins.includes('jsx'),
+        // "preserve" mode would be more correct, but it will keep not transpile generic
+        // React.Components which are provided with null or undefined e.g. <Foo<undefined />>
+        jsx: config.plugins.includes('jsx') && 'react',
       }
     }).outputText