@graphql-codegen/typescript-react-query 3.6.2 → 4.0.1-alpha-ab1d4bbb7.0

package/cjs/fetcher-fetch-hardcoded.js

@@ -55,7 +55,7 @@ ${this.getFetchParams()}
       TData = ${operationResultType},
       TError = ${this.visitor.config.errorType}
     >(
-      pageParamKey: keyof ${operationVariablesTypes},
+      _pageParamKey: keyof ${operationVariablesTypes},
       ${variables},
       ${options}
     ) =>

package/cjs/fetcher-fetch.js

@@ -33,13 +33,13 @@ function fetcher<TData, TVariables>(endpoint: string, requestInit: RequestInit,
         const hookConfig = this.visitor.queryMethodMap;
         this.visitor.reactQueryHookIdentifiersInUse.add(hookConfig.infiniteQuery.hook);
         this.visitor.reactQueryOptionsIdentifiersInUse.add(hookConfig.infiniteQuery.options);
-        const options = `options?: ${hookConfig.query.options}<${operationResultType}, TError, TData>`;
+        const options = `options?: ${hookConfig.infiniteQuery.options}<${operationResultType}, TError, TData>`;
         return `export const useInfinite${operationName} = <
       TData = ${operationResultType},
       TError = ${this.visitor.config.errorType}
     >(
       dataSource: { endpoint: string, fetchParams?: RequestInit },
-      pageParamKey: keyof ${operationVariablesTypes},
+      _pageParamKey: keyof ${operationVariablesTypes},
       ${variables},
       ${options}
     ) =>

package/cjs/fetcher-graphql-request.js

@@ -24,7 +24,7 @@ function fetcher<TData, TVariables>(client: GraphQLClient, query: string, variab
       TData = ${operationResultType},
       TError = ${this.visitor.config.errorType}
     >(
-      pageParamKey: keyof ${operationVariablesTypes},
+      _pageParamKey: keyof ${operationVariablesTypes},
       client: GraphQLClient,
       ${variables},
       ${options},

package/cjs/visitor.js

@@ -20,6 +20,7 @@ class ReactQueryVisitor extends visitor_plugin_common_1.ClientSideBaseVisitor {
             exposeMutationKeys: (0, visitor_plugin_common_1.getConfigValue)(rawConfig.exposeMutationKeys, false),
             exposeFetcher: (0, visitor_plugin_common_1.getConfigValue)(rawConfig.exposeFetcher, false),
             addInfiniteQuery: (0, visitor_plugin_common_1.getConfigValue)(rawConfig.addInfiniteQuery, false),
+            legacyMode: (0, visitor_plugin_common_1.getConfigValue)(rawConfig.legacyMode, false),
         });
         this.rawConfig = rawConfig;
         this.reactQueryHookIdentifiersInUse = new Set();
@@ -66,14 +67,12 @@ class ReactQueryVisitor extends visitor_plugin_common_1.ClientSideBaseVisitor {
         if (!this.hasOperations) {
             return baseImports;
         }
-        if (this.config.addInfiniteQuery) {
-            this.reactQueryOptionsIdentifiersInUse.add('QueryFunctionContext');
-        }
         const hookAndTypeImports = [
             ...Array.from(this.reactQueryHookIdentifiersInUse),
             ...Array.from(this.reactQueryOptionsIdentifiersInUse).map(identifier => `${this.config.useTypeImports ? 'type ' : ''}${identifier}`),
         ];
-        return [...baseImports, `import { ${hookAndTypeImports.join(', ')} } from 'react-query';`];
+        const moduleName = this.config.legacyMode ? 'react-query' : '@tanstack/react-query';
+        return [...baseImports, `import { ${hookAndTypeImports.join(', ')} } from '${moduleName}';`];
     }
     getFetcherImplementation() {
         return this.fetcher.generateFetcherImplementaion();

package/esm/fetcher-fetch-hardcoded.js

@@ -52,7 +52,7 @@ ${this.getFetchParams()}
       TData = ${operationResultType},
       TError = ${this.visitor.config.errorType}
     >(
-      pageParamKey: keyof ${operationVariablesTypes},
+      _pageParamKey: keyof ${operationVariablesTypes},
       ${variables},
       ${options}
     ) =>

package/esm/fetcher-fetch.js

@@ -30,13 +30,13 @@ function fetcher<TData, TVariables>(endpoint: string, requestInit: RequestInit,
         const hookConfig = this.visitor.queryMethodMap;
         this.visitor.reactQueryHookIdentifiersInUse.add(hookConfig.infiniteQuery.hook);
         this.visitor.reactQueryOptionsIdentifiersInUse.add(hookConfig.infiniteQuery.options);
-        const options = `options?: ${hookConfig.query.options}<${operationResultType}, TError, TData>`;
+        const options = `options?: ${hookConfig.infiniteQuery.options}<${operationResultType}, TError, TData>`;
         return `export const useInfinite${operationName} = <
       TData = ${operationResultType},
       TError = ${this.visitor.config.errorType}
     >(
       dataSource: { endpoint: string, fetchParams?: RequestInit },
-      pageParamKey: keyof ${operationVariablesTypes},
+      _pageParamKey: keyof ${operationVariablesTypes},
       ${variables},
       ${options}
     ) =>

package/esm/fetcher-graphql-request.js

@@ -21,7 +21,7 @@ function fetcher<TData, TVariables>(client: GraphQLClient, query: string, variab
       TData = ${operationResultType},
       TError = ${this.visitor.config.errorType}
     >(
-      pageParamKey: keyof ${operationVariablesTypes},
+      _pageParamKey: keyof ${operationVariablesTypes},
       client: GraphQLClient,
       ${variables},
       ${options},

package/esm/visitor.js

@@ -16,6 +16,7 @@ export class ReactQueryVisitor extends ClientSideBaseVisitor {
             exposeMutationKeys: getConfigValue(rawConfig.exposeMutationKeys, false),
             exposeFetcher: getConfigValue(rawConfig.exposeFetcher, false),
             addInfiniteQuery: getConfigValue(rawConfig.addInfiniteQuery, false),
+            legacyMode: getConfigValue(rawConfig.legacyMode, false),
         });
         this.rawConfig = rawConfig;
         this.reactQueryHookIdentifiersInUse = new Set();
@@ -62,14 +63,12 @@ export class ReactQueryVisitor extends ClientSideBaseVisitor {
         if (!this.hasOperations) {
             return baseImports;
         }
-        if (this.config.addInfiniteQuery) {
-            this.reactQueryOptionsIdentifiersInUse.add('QueryFunctionContext');
-        }
         const hookAndTypeImports = [
             ...Array.from(this.reactQueryHookIdentifiersInUse),
             ...Array.from(this.reactQueryOptionsIdentifiersInUse).map(identifier => `${this.config.useTypeImports ? 'type ' : ''}${identifier}`),
         ];
-        return [...baseImports, `import { ${hookAndTypeImports.join(', ')} } from 'react-query';`];
+        const moduleName = this.config.legacyMode ? 'react-query' : '@tanstack/react-query';
+        return [...baseImports, `import { ${hookAndTypeImports.join(', ')} } from '${moduleName}';`];
     }
     getFetcherImplementation() {
         return this.fetcher.generateFetcherImplementaion();

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@graphql-codegen/typescript-react-query",
-  "version": "3.6.2",
+  "version": "4.0.1-alpha-ab1d4bbb7.0",
   "description": "GraphQL Code Generator plugin for generating a ready-to-use React-Query Hooks based on GraphQL operations",
   "peerDependencies": {
     "graphql": "^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0"
   },
   "dependencies": {
-    "@graphql-codegen/plugin-helpers": "^2.6.0",
-    "@graphql-codegen/visitor-plugin-common": "2.12.0",
+    "@graphql-codegen/plugin-helpers": "^2.6.1-alpha-ab1d4bbb7.0",
+    "@graphql-codegen/visitor-plugin-common": "2.12.1-alpha-ab1d4bbb7.0",
     "auto-bind": "~4.0.0",
     "change-case-all": "1.0.14",
     "tslib": "~2.4.0"

package/typings/config.d.ts

@@ -11,8 +11,11 @@ export declare type CustomFetch = {
  * @description This plugin generates `React-Query` Hooks with TypeScript typings.
  *
  * It extends the basic TypeScript plugins: `@graphql-codegen/typescript`, `@graphql-codegen/typescript-operations` - and thus shares a similar configuration.
+ *
+ * > **If you are using the `react-query` package instead of the `@tanstack/react-query` package in your project, please set the `legacyMode` option to `true`.**
+ *
  */
-export interface ReactQueryRawPluginConfig extends Omit<RawClientSideBasePluginConfig, 'documentMode' | 'noGraphQLTag' | 'gqlImport' | 'documentNodeImport' | 'noExport' | 'importOperationTypesFrom' | 'importDocumentNodeExternallyFrom' | 'useTypeImports'> {
+export interface ReactQueryRawPluginConfig extends Omit<RawClientSideBasePluginConfig, 'documentMode' | 'noGraphQLTag' | 'gqlImport' | 'documentNodeImport' | 'noExport' | 'importOperationTypesFrom' | 'importDocumentNodeExternallyFrom' | 'useTypeImports' | 'legacyMode'> {
     /**
      * @description Customize the fetcher you wish to use in the generated file. React-Query is agnostic to the data-fetching layer, so you should provide it, or use a custom one.
      *
@@ -78,4 +81,9 @@ export interface ReactQueryRawPluginConfig extends Omit<RawClientSideBasePluginC
      * @description Adds an Infinite Query along side the standard one
      */
     addInfiniteQuery?: boolean;
+    /**
+     * @default true
+     * @description If false, it will work with `@tanstack/react-query`, default value is true.
+     */
+    legacyMode?: boolean;
 }

package/typings/visitor.d.ts

@@ -10,6 +10,7 @@ export interface ReactQueryPluginConfig extends ClientSideBasePluginConfig {
     exposeMutationKeys: boolean;
     exposeFetcher: boolean;
     addInfiniteQuery: boolean;
+    legacyMode: boolean;
 }
 export interface ReactQueryMethodMap {
     infiniteQuery: {