feat(typescript-rtk-query): add importAlternateApiName to conifg options (#75)

* feat: add importAlternateApiName to conifg options

* Create changeset.md

---------

Co-authored-by: Dominic <[email protected]>

Author: DominicGBauer

.changeset/changeset.md

@@ -0,0 +1,7 @@
+---
+"@graphql-codegen/typescript-rtk-query": minor
+---
+
+[typescript-rtk-query] feat: add importAlternateApiName to conifg options
+
+Add functionality to allow users to use the optional config variable importAlternateApiName to change the api name of the import used by baseApi. It will default to 'api'.

packages/plugins/typescript/rtk-query/src/config.ts

@@ -24,6 +24,32 @@ export interface RTKConfig {
    * ```
    */
   importBaseApiFrom: string;
+  /**
+   * @name importBaseApiAlternateName
+   * @description Change the import name of the baseApi from default 'api'
+   * @default 'api'
+   *
+
+   * @exampleMarkdown
+   * ```ts filename="codegen.ts"
+   *  import type { CodegenConfig } from '@graphql-codegen/cli';
+   *
+   *  const config: CodegenConfig = {
+   *    // ...
+   *    generates: {
+   *      'path/to/file.ts': {
+   *        plugins: ['typescript', 'typescript-resolvers', 'typescript-rtk-query'],
+   *        config: {
+   *          importBaseApiFrom: 'src/app/api/baseApi',
+   *          importBaseApiAlternateName: 'alternateApiName'
+   *        },
+   *      },
+   *    },
+   *  };
+   *  export default config;
+   * ```
+   */
+  importBaseApiAlternateName?: string;
   /**
    * @name exportHooks
    * @description Whether to export React Hooks from the generated api. Enable only when using the `"@reduxjs/toolkit/query/react"` import of `createApi`

packages/plugins/typescript/rtk-query/src/visitor.ts

@@ -25,6 +25,7 @@ export class RTKQueryVisitor extends ClientSideBaseVisitor<RTKQueryRawPluginConf
     super(schema, fragments, rawConfig, {
       documentMode: DocumentMode.string,
       importBaseApiFrom: getConfigValue(rawConfig.importBaseApiFrom, ''),
+      importBaseApiAlternateName: getConfigValue(rawConfig.importBaseApiAlternateName, 'api'),
       exportHooks: getConfigValue(rawConfig.exportHooks, false),
       overrideExisting: getConfigValue(rawConfig.overrideExisting, ''),
     });
@@ -49,7 +50,10 @@ export class RTKQueryVisitor extends ClientSideBaseVisitor<RTKQueryRawPluginConf
       return baseImports;
     }
 
-    return [...baseImports, `import { api } from '${this.config.importBaseApiFrom}';`];
+    return [
+      ...baseImports,
+      `import { ${this.config.importBaseApiAlternateName} } from '${this.config.importBaseApiFrom}';`,
+    ];
   }
 
   public getInjectCall() {

packages/plugins/typescript/rtk-query/tests/__snapshots__/rtk-query.spec.ts.snap

@@ -78,6 +78,75 @@ const injectedRtkApi = api.injectEndpoints({
 export { injectedRtkApi as api };
 export const { useCommentQuery, useLazyCommentQuery, useFeedQuery, useLazyFeedQuery, useSubmitRepositoryMutation } = injectedRtkApi;
 
+"
+`;
+
+exports[`RTK Query With importBaseApiAlternateName 1`] = `
+"
+export const CommentDocument = \`
+    query Comment($repoFullName: String!, $limit: Int, $offset: Int) {
+  currentUser {
+    login
+    html_url
+  }
+  entry(repoFullName: $repoFullName) {
+    id
+    postedBy {
+      login
+      html_url
+    }
+    createdAt
+    comments(limit: $limit, offset: $offset) {
+      ...CommentsPageComment
+    }
+    commentCount
+    repository {
+      full_name
+      html_url
+      ... on Repository {
+        description
+        open_issues_count
+        stargazers_count
+      }
+    }
+  }
+}
+    \${CommentsPageCommentFragmentDoc}\`;
+export const FeedDocument = \`
+    query Feed($type: FeedType!, $offset: Int, $limit: Int) {
+  currentUser {
+    login
+  }
+  feed(type: $type, offset: $offset, limit: $limit) {
+    ...FeedEntry
+  }
+}
+    \${FeedEntryFragmentDoc}\`;
+export const SubmitRepositoryDocument = \`
+    mutation submitRepository($repoFullName: String!) {
+  submitRepository(repoFullName: $repoFullName) {
+    createdAt
+  }
+}
+    \`;
+
+const injectedRtkApi = api.injectEndpoints({
+  endpoints: (build) => ({
+    Comment: build.query<CommentQuery, CommentQueryVariables>({
+      query: (variables) => ({ document: CommentDocument, variables })
+    }),
+    Feed: build.query<FeedQuery, FeedQueryVariables>({
+      query: (variables) => ({ document: FeedDocument, variables })
+    }),
+    submitRepository: build.mutation<SubmitRepositoryMutation, SubmitRepositoryMutationVariables>({
+      query: (variables) => ({ document: SubmitRepositoryDocument, variables })
+    }),
+  }),
+});
+
+export { injectedRtkApi as api };
+
+
 "
 `;
 

packages/plugins/typescript/rtk-query/tests/rtk-query.spec.ts

@@ -45,6 +45,7 @@ describe('RTK Query', () => {
 
     expect(content.content).toMatchSnapshot();
   });
+
   test('With hooks', async () => {
     const documents = parse(gql.commentQuery + gql.feedQuery + gql.newEntryMutation);
     const docs = [{ location: '', document: documents }];
@@ -65,6 +66,7 @@ describe('RTK Query', () => {
 
     expect(content.content).toMatchSnapshot();
   });
+
   test('With overrideExisting', async () => {
     const documents = parse(gql.commentQuery + gql.feedQuery + gql.newEntryMutation);
     const docs = [{ location: '', document: documents }];
@@ -87,6 +89,28 @@ describe('RTK Query', () => {
 
     expect(content.content).toMatchSnapshot();
   });
+
+  test('With importBaseApiAlternateName', async () => {
+    const documents = parse(gql.commentQuery + gql.feedQuery + gql.newEntryMutation);
+    const docs = [{ location: '', document: documents }];
+
+    const content = (await plugin(
+      schema,
+      docs,
+      {
+        importBaseApiFrom: './baseApi',
+        importBaseApiAlternateName: 'alternateApiName',
+      },
+      {
+        outputFile: 'graphql.ts',
+      }
+    )) as Types.ComplexPluginOutput;
+
+    expect(content.prepend).toContain("import { alternateApiName } from './baseApi';");
+
+    expect(content.content).toMatchSnapshot();
+  });
+
   test('For fragment', async () => {
     const documents = parse(gql.voteButtonsFragment);
     const docs = [{ location: '', document: documents }];