fix: correctly remove file extension on types import path (#742)

Author: Dane Pilcher

packages/graphql-generator/src/__tests__/utils/GraphQLStatementsFormatter.test.ts

@@ -36,6 +36,21 @@ describe('GraphQL statements Formatter', () => {
     expect(formattedOutput).toMatchSnapshot();
   });
 
+  it('Generates formatted output for TS frontend with posix path in same dir', () => {
+    const formattedOutput = new GraphQLStatementsFormatter('typescript', 'queries', './API.ts').format(statements);
+    expect(formattedOutput).toMatchSnapshot();
+  });
+
+  it('Generates formatted output for TS frontend with windows path in same dir', () => {
+    const formattedOutput = new GraphQLStatementsFormatter('typescript', 'queries', '.\\API.ts').format(statements);
+    expect(formattedOutput).toMatchSnapshot();
+  });
+
+  it('Generates formatted output and only remove file extension', () => {
+    const formattedOutput = new GraphQLStatementsFormatter('typescript', 'queries', '../Components/Data/API.tsx').format(statements);
+    expect(formattedOutput).toMatchSnapshot();
+  });
+
   it('Generates formatted output for Flow frontend', () => {
     const formattedOutput = new GraphQLStatementsFormatter('flow').format(statements);
     expect(formattedOutput).toMatchSnapshot();

packages/graphql-generator/src/__tests__/utils/__snapshots__/GraphQLStatementsFormatter.test.ts.snap

@@ -1,5 +1,31 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`GraphQL statements Formatter Generates formatted output and only remove file extension 1`] = `
+"/* tslint:disable */
+/* eslint-disable */
+// this is an auto generated file. This will be overwritten
+
+import * as APITypes from \\"../Components/Data/API\\";
+type GeneratedQuery<InputType, OutputType> = string & {
+  __generatedQueryInput: InputType;
+  __generatedQueryOutput: OutputType;
+};
+
+export const getProject = /* GraphQL */ \`query GetProject($id: ID!) {
+  getProject(id: $id) {
+    id
+    name
+    createdAt
+    updatedAt
+  }
+}
+\` as GeneratedQuery<
+  APITypes.GetProjectQueryVariables,
+  APITypes.GetProjectQuery
+>;
+"
+`;
+
 exports[`GraphQL statements Formatter Generates formatted output for Angular frontend 1`] = `
 "# this is an auto generated file. This will be overwritten
 
@@ -88,6 +114,32 @@ export const getProject = /* GraphQL */ \`query GetProject($id: ID!) {
 "
 `;
 
+exports[`GraphQL statements Formatter Generates formatted output for TS frontend with posix path in same dir 1`] = `
+"/* tslint:disable */
+/* eslint-disable */
+// this is an auto generated file. This will be overwritten
+
+import * as APITypes from \\"./API\\";
+type GeneratedQuery<InputType, OutputType> = string & {
+  __generatedQueryInput: InputType;
+  __generatedQueryOutput: OutputType;
+};
+
+export const getProject = /* GraphQL */ \`query GetProject($id: ID!) {
+  getProject(id: $id) {
+    id
+    name
+    createdAt
+    updatedAt
+  }
+}
+\` as GeneratedQuery<
+  APITypes.GetProjectQueryVariables,
+  APITypes.GetProjectQuery
+>;
+"
+`;
+
 exports[`GraphQL statements Formatter Generates formatted output for TS frontend with windows path 1`] = `
 "/* tslint:disable */
 /* eslint-disable */
@@ -113,3 +165,29 @@ export const getProject = /* GraphQL */ \`query GetProject($id: ID!) {
 >;
 "
 `;
+
+exports[`GraphQL statements Formatter Generates formatted output for TS frontend with windows path in same dir 1`] = `
+"/* tslint:disable */
+/* eslint-disable */
+// this is an auto generated file. This will be overwritten
+
+import * as APITypes from \\"./API\\";
+type GeneratedQuery<InputType, OutputType> = string & {
+  __generatedQueryInput: InputType;
+  __generatedQueryOutput: OutputType;
+};
+
+export const getProject = /* GraphQL */ \`query GetProject($id: ID!) {
+  getProject(id: $id) {
+    id
+    name
+    createdAt
+    updatedAt
+  }
+}
+\` as GeneratedQuery<
+  APITypes.GetProjectQueryVariables,
+  APITypes.GetProjectQuery
+>;
+"
+`;

packages/graphql-generator/src/utils/GraphQLStatementsFormatter.ts

@@ -35,12 +35,20 @@ export class GraphQLStatementsFormatter {
     }[operation];
     this.lintOverrides = [];
     this.headerComments = [];
-    this.typesPath = typesPath
-      ? typesPath.replace(/.ts/i, '')
-        // ensure posix path separators are used
-        .split(path.win32.sep)
-        .join(path.posix.sep)
-      : null;
+    if (typesPath) {
+      // ensure posix path separators are used
+      const typesPathWithPosixSep = typesPath.split(path.win32.sep).join(path.posix.sep)
+      const { dir, name } = path.parse(typesPathWithPosixSep);
+      const typesPathWithoutExtension = path.join(dir, name);
+      if (!typesPathWithoutExtension.startsWith('.')) {
+        // path.join will strip prefixed ./
+        this.typesPath = `./${typesPathWithoutExtension}`;
+      } else {
+        this.typesPath = typesPathWithoutExtension;
+      }
+    } else {
+      this.typesPath = null;
+    }
     this.includeTypeScriptTypes = !!(this.language === 'typescript' && this.opTypeName && this.typesPath);
   }