feat: [typescript-react-query] Able to import useQuery from own-path …

…instead react-query or tanstack/react-query (#369) * allow to add reactquery import from * add example usage * update test * update test * add changeset
dotansimha · Sep 11, 2023 · 9d6a388 · 9d6a388
1 parent f71d327
commit 9d6a388
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 1 deletion.
diff --git a/.changeset/hot-tools-destroy.md b/.changeset/hot-tools-destroy.md
@@ -0,0 +1,5 @@
+---
+'@graphql-codegen/typescript-react-query': patch
+---
+
+Provide reactQueryImportFrom field to custom react-query import from
diff --git a/packages/plugins/typescript/react-query/src/config.ts b/packages/plugins/typescript/react-query/src/config.ts
@@ -113,4 +113,15 @@ export interface ReactQueryRawPluginConfig
    * @description If false, it will work with `@tanstack/react-query`, default value is true.
    */
   legacyMode?: boolean;
+
+  /**
+   * @default empty
+   * @description Add custom import for react-query.
+   * It can be used to import from `@tanstack/react-query` instead of `react-query`. But make sure it include useQuery, UseQueryOptions, useMutation, UseMutationOptions, useInfiniteQuery, UseInfiniteQueryOptions
+   *
+   * The following options are available to use:
+   *
+   * - "src/your-own-react-query-customized": import { useQuery, UseQueryOptions, useMutation, UseMutationOptions, useInfiniteQuery, UseInfiniteQueryOptions } from your own react-query customized package.
+   */
+  reactQueryImportFrom?: string;
 }
diff --git a/packages/plugins/typescript/react-query/src/visitor.ts b/packages/plugins/typescript/react-query/src/visitor.ts
@@ -32,6 +32,7 @@ export interface ReactQueryPluginConfig extends ClientSideBasePluginConfig {
   exposeFetcher: boolean;
   addInfiniteQuery: boolean;
   legacyMode: boolean;
+  reactQueryImportFrom?: string;
 }
 
 export interface ReactQueryMethodMap {
@@ -89,6 +90,7 @@ export class ReactQueryVisitor extends ClientSideBaseVisitor<
       exposeFetcher: getConfigValue(rawConfig.exposeFetcher, false),
       addInfiniteQuery: getConfigValue(rawConfig.addInfiniteQuery, false),
       legacyMode: getConfigValue(rawConfig.legacyMode, false),
+      reactQueryImportFrom: getConfigValue(rawConfig.reactQueryImportFrom, ''),
     });
     this._externalImportPrefix = this.config.importOperationTypesFrom
       ? `${this.config.importOperationTypesFrom}.`
@@ -135,7 +137,11 @@ export class ReactQueryVisitor extends ClientSideBaseVisitor<
       ),
     ];
 
-    const moduleName = this.config.legacyMode ? 'react-query' : '@tanstack/react-query';
+    const moduleName = this.config.reactQueryImportFrom
+      ? this.config.reactQueryImportFrom
+      : this.config.legacyMode
+      ? 'react-query'
+      : '@tanstack/react-query';
 
     return [...baseImports, `import { ${hookAndTypeImports.join(', ')} } from '${moduleName}';`];
   }

diff --git a/packages/plugins/typescript/react-query/tests/react-query.spec.ts b/packages/plugins/typescript/react-query/tests/react-query.spec.ts
@@ -1370,4 +1370,20 @@ export const useTestMutation = <
           });
     `);
   });
+
+  describe('reactQueryImportFrom: custom-path', () => {
+    it('Should import react-query from custom path', async () => {
+      const config = {
+        legacyMode: true,
+        reactQueryImportFrom: 'custom-react-query',
+      };
+      const out = (await plugin(schema, docs, config)) as Types.ComplexPluginOutput;
+      expect(out.prepend).toContain(
+        "import { useQuery, useMutation, UseQueryOptions, UseMutationOptions } from 'custom-react-query';",
+      );
+      expect(out.prepend).not.toContain(
+        `"import { useQuery, useMutation, UseQueryOptions, UseMutationOptions } from 'react-query';"`,
+      );
+    });
+  });
 });