@graphql-codegen/typescript-react-query 5.1.0-alpha-20231024141603-98360b670 → 6.0.0

package/cjs/fetcher-custom-mapper.js

@@ -1,21 +1,25 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CustomMapperFetcher = void 0;
+const tslib_1 = require("tslib");
+const auto_bind_1 = tslib_1.__importDefault(require("auto-bind"));
 const visitor_plugin_common_1 = require("@graphql-codegen/visitor-plugin-common");
-const variables_generator_js_1 = require("./variables-generator.js");
-class CustomMapperFetcher {
+const fetcher_js_1 = require("./fetcher.js");
+class CustomMapperFetcher extends fetcher_js_1.FetcherRenderer {
     constructor(visitor, customFetcher) {
+        super(visitor);
         this.visitor = visitor;
         if (typeof customFetcher === 'string') {
             customFetcher = { func: customFetcher };
         }
         this._mapper = (0, visitor_plugin_common_1.parseMapper)(customFetcher.func);
         this._isReactHook = customFetcher.isReactHook;
+        (0, auto_bind_1.default)(this);
     }
     getFetcherFnName(operationResultType, operationVariablesTypes) {
         return `${this._mapper.type}<${operationResultType}, ${operationVariablesTypes}>`;
     }
-    generateFetcherImplementaion() {
+    generateFetcherImplementation() {
         if (this._mapper.isExternal) {
             return (0, visitor_plugin_common_1.buildMapperImport)(this._mapper.source, [
                 {
@@ -26,77 +30,45 @@ class CustomMapperFetcher {
         }
         return null;
     }
-    generateInfiniteQueryHook(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables) {
-        const variables = `variables${hasRequiredVariables ? '' : '?'}: ${operationVariablesTypes}`;
-        const hookConfig = this.visitor.queryMethodMap;
-        this.visitor.reactQueryHookIdentifiersInUse.add(hookConfig.infiniteQuery.hook);
-        this.visitor.reactQueryOptionsIdentifiersInUse.add(hookConfig.infiniteQuery.options);
-        const options = `options?: ${hookConfig.infiniteQuery.options}<${operationResultType}, TError, TData>`;
+    generateInfiniteQueryHook(config, isSuspense = false) {
+        const { documentVariableName, operationResultType, operationVariablesTypes } = config;
         const typedFetcher = this.getFetcherFnName(operationResultType, operationVariablesTypes);
         const implHookOuter = this._isReactHook
             ? `const query = ${typedFetcher}(${documentVariableName})`
             : '';
-        const impl = this._isReactHook
+        const implFetcher = this._isReactHook
             ? `(metaData) => query({...variables, ...(metaData.pageParam ?? {})})`
             : `(metaData) => ${typedFetcher}(${documentVariableName}, {...variables, ...(metaData.pageParam ?? {})})()`;
-        return `export const useInfinite${operationName} = <
-      TData = ${operationResultType},
-      TError = ${this.visitor.config.errorType}
-    >(
-      ${variables},
-      ${options}
-    ) =>{
-    ${implHookOuter}
-    return ${hookConfig.infiniteQuery.hook}<${operationResultType}, TError, TData>(
-      ${(0, variables_generator_js_1.generateInfiniteQueryKey)(node, hasRequiredVariables)},
-      ${impl},
-      options
-    )};`;
+        const { generateBaseInfiniteQueryHook } = this.generateInfiniteQueryHelper(config, isSuspense);
+        return generateBaseInfiniteQueryHook({
+            implHookOuter,
+            implFetcher,
+        });
     }
-    generateQueryHook(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables) {
-        const variables = `variables${hasRequiredVariables ? '' : '?'}: ${operationVariablesTypes}`;
-        const hookConfig = this.visitor.queryMethodMap;
-        this.visitor.reactQueryHookIdentifiersInUse.add(hookConfig.query.hook);
-        this.visitor.reactQueryOptionsIdentifiersInUse.add(hookConfig.query.options);
-        const options = `options?: ${hookConfig.query.options}<${operationResultType}, TError, TData>`;
+    generateQueryHook(config, isSuspense = false) {
+        const { generateBaseQueryHook } = this.generateQueryHelper(config, isSuspense);
+        const { documentVariableName, operationResultType, operationVariablesTypes } = config;
         const typedFetcher = this.getFetcherFnName(operationResultType, operationVariablesTypes);
-        const impl = this._isReactHook
+        const implFetcher = this._isReactHook
             ? `${typedFetcher}(${documentVariableName}).bind(null, variables)`
             : `${typedFetcher}(${documentVariableName}, variables)`;
-        return `export const use${operationName} = <
-      TData = ${operationResultType},
-      TError = ${this.visitor.config.errorType}
-    >(
-      ${variables},
-      ${options}
-    ) =>
-    ${hookConfig.query.hook}<${operationResultType}, TError, TData>(
-      ${(0, variables_generator_js_1.generateQueryKey)(node, hasRequiredVariables)},
-      ${impl},
-      options
-    );`;
+        return generateBaseQueryHook({
+            implFetcher,
+        });
     }
-    generateMutationHook(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables) {
-        const variables = `variables?: ${operationVariablesTypes}`;
-        const hookConfig = this.visitor.queryMethodMap;
-        this.visitor.reactQueryHookIdentifiersInUse.add(hookConfig.mutation.hook);
-        this.visitor.reactQueryOptionsIdentifiersInUse.add(hookConfig.mutation.options);
-        const options = `options?: ${hookConfig.mutation.options}<${operationResultType}, TError, ${operationVariablesTypes}, TContext>`;
+    generateMutationHook(config) {
+        const { documentVariableName, operationResultType, operationVariablesTypes } = config;
+        const { generateBaseMutationHook, variables } = this.generateMutationHelper(config);
         const typedFetcher = this.getFetcherFnName(operationResultType, operationVariablesTypes);
-        const impl = this._isReactHook
+        const implFetcher = this._isReactHook
             ? `${typedFetcher}(${documentVariableName})`
             : `(${variables}) => ${typedFetcher}(${documentVariableName}, variables)()`;
-        return `export const use${operationName} = <
-      TError = ${this.visitor.config.errorType},
-      TContext = unknown
-    >(${options}) =>
-    ${hookConfig.mutation.hook}<${operationResultType}, TError, ${operationVariablesTypes}, TContext>(
-      ${(0, variables_generator_js_1.generateMutationKey)(node)},
-      ${impl},
-      options
-    );`;
+        return generateBaseMutationHook({
+            implFetcher,
+        });
     }
-    generateFetcherFetch(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables) {
+    generateFetcherFetch(config) {
+        const { documentVariableName, operationResultType, operationVariablesTypes, hasRequiredVariables, operationName, } = config;
         // We can't generate a fetcher field since we can't call react hooks outside of a React Fucntion Component
         // Related: https://reactjs.org/docs/hooks-rules.html
         if (this._isReactHook)

package/cjs/fetcher-fetch-hardcoded.js

@@ -1,11 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.HardcodedFetchFetcher = void 0;
-const variables_generator_js_1 = require("./variables-generator.js");
-class HardcodedFetchFetcher {
+const tslib_1 = require("tslib");
+const auto_bind_1 = tslib_1.__importDefault(require("auto-bind"));
+const fetcher_js_1 = require("./fetcher.js");
+class HardcodedFetchFetcher extends fetcher_js_1.FetcherRenderer {
     constructor(visitor, config) {
+        super(visitor);
         this.visitor = visitor;
         this.config = config;
+        (0, auto_bind_1.default)(this);
     }
     getEndpoint() {
         try {
@@ -26,7 +30,7 @@ class HardcodedFetchFetcher {
         }
         return `    method: "POST",${fetchParamsPartial}`;
     }
-    generateFetcherImplementaion() {
+    generateFetcherImplementation() {
         return `
 function fetcher<TData, TVariables>(query: string, variables?: TVariables) {
   return async (): Promise<TData> => {
@@ -47,62 +51,30 @@ ${this.getFetchParams()}
   }
 }`;
     }
-    generateInfiniteQueryHook(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables) {
-        const variables = (0, variables_generator_js_1.generateQueryVariablesSignature)(hasRequiredVariables, operationVariablesTypes);
-        const hookConfig = this.visitor.queryMethodMap;
-        this.visitor.reactQueryHookIdentifiersInUse.add(hookConfig.infiniteQuery.hook);
-        this.visitor.reactQueryOptionsIdentifiersInUse.add(hookConfig.infiniteQuery.options);
-        const options = `options?: ${hookConfig.infiniteQuery.options}<${operationResultType}, TError, TData>`;
-        return `export const useInfinite${operationName} = <
-      TData = ${operationResultType},
-      TError = ${this.visitor.config.errorType}
-    >(
-      ${variables},
-      ${options}
-    ) =>
-    ${hookConfig.infiniteQuery.hook}<${operationResultType}, TError, TData>(
-      ${(0, variables_generator_js_1.generateInfiniteQueryKey)(node, hasRequiredVariables)},
-      (metaData) => fetcher<${operationResultType}, ${operationVariablesTypes}>(${documentVariableName}, {...variables, ...(metaData.pageParam ?? {})})(),
-      options
-    );`;
+    generateInfiniteQueryHook(config, isSuspense = false) {
+        const { generateBaseInfiniteQueryHook } = this.generateInfiniteQueryHelper(config, isSuspense);
+        const { documentVariableName, operationResultType, operationVariablesTypes } = config;
+        return generateBaseInfiniteQueryHook({
+            implFetcher: `(metaData) => fetcher<${operationResultType}, ${operationVariablesTypes}>(${documentVariableName}, {...variables, ...(metaData.pageParam ?? {})})()`,
+        });
     }
-    generateQueryHook(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables) {
-        const variables = (0, variables_generator_js_1.generateQueryVariablesSignature)(hasRequiredVariables, operationVariablesTypes);
-        const hookConfig = this.visitor.queryMethodMap;
-        this.visitor.reactQueryHookIdentifiersInUse.add(hookConfig.query.hook);
-        this.visitor.reactQueryOptionsIdentifiersInUse.add(hookConfig.query.options);
-        const options = `options?: ${hookConfig.query.options}<${operationResultType}, TError, TData>`;
-        return `export const use${operationName} = <
-      TData = ${operationResultType},
-      TError = ${this.visitor.config.errorType}
-    >(
-      ${variables},
-      ${options}
-    ) =>
-    ${hookConfig.query.hook}<${operationResultType}, TError, TData>(
-      ${(0, variables_generator_js_1.generateQueryKey)(node, hasRequiredVariables)},
-      fetcher<${operationResultType}, ${operationVariablesTypes}>(${documentVariableName}, variables),
-      options
-    );`;
+    generateQueryHook(config, isSuspense = false) {
+        const { generateBaseQueryHook } = this.generateQueryHelper(config, isSuspense);
+        const { documentVariableName, operationResultType, operationVariablesTypes } = config;
+        return generateBaseQueryHook({
+            implFetcher: `fetcher<${operationResultType}, ${operationVariablesTypes}>(${documentVariableName}, variables)`,
+        });
     }
-    generateMutationHook(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables) {
-        const variables = `variables?: ${operationVariablesTypes}`;
-        const hookConfig = this.visitor.queryMethodMap;
-        this.visitor.reactQueryHookIdentifiersInUse.add(hookConfig.mutation.hook);
-        this.visitor.reactQueryOptionsIdentifiersInUse.add(hookConfig.mutation.options);
-        const options = `options?: ${hookConfig.mutation.options}<${operationResultType}, TError, ${operationVariablesTypes}, TContext>`;
-        return `export const use${operationName} = <
-      TError = ${this.visitor.config.errorType},
-      TContext = unknown
-    >(${options}) =>
-    ${hookConfig.mutation.hook}<${operationResultType}, TError, ${operationVariablesTypes}, TContext>(
-      ${(0, variables_generator_js_1.generateMutationKey)(node)},
-      (${variables}) => fetcher<${operationResultType}, ${operationVariablesTypes}>(${documentVariableName}, variables)(),
-      options
-    );`;
+    generateMutationHook(config) {
+        const { generateBaseMutationHook, variables } = this.generateMutationHelper(config);
+        const { documentVariableName, operationResultType, operationVariablesTypes } = config;
+        return generateBaseMutationHook({
+            implFetcher: `(${variables}) => fetcher<${operationResultType}, ${operationVariablesTypes}>(${documentVariableName}, variables)()`,
+        });
     }
-    generateFetcherFetch(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables) {
-        const variables = (0, variables_generator_js_1.generateQueryVariablesSignature)(hasRequiredVariables, operationVariablesTypes);
+    generateFetcherFetch(config) {
+        const { documentVariableName, operationResultType, operationVariablesTypes, operationName } = config;
+        const variables = this.generateQueryVariablesSignature(config);
         return `\nuse${operationName}.fetcher = (${variables}) => fetcher<${operationResultType}, ${operationVariablesTypes}>(${documentVariableName}, variables);`;
     }
 }

package/cjs/fetcher-fetch.js

@@ -1,12 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FetchFetcher = void 0;
-const variables_generator_js_1 = require("./variables-generator.js");
-class FetchFetcher {
+const tslib_1 = require("tslib");
+const auto_bind_1 = tslib_1.__importDefault(require("auto-bind"));
+const fetcher_js_1 = require("./fetcher.js");
+class FetchFetcher extends fetcher_js_1.FetcherRenderer {
     constructor(visitor) {
+        super(visitor);
         this.visitor = visitor;
+        (0, auto_bind_1.default)(this);
     }
-    generateFetcherImplementaion() {
+    generateFetcherImplementation() {
         return `
 function fetcher<TData, TVariables>(endpoint: string, requestInit: RequestInit, query: string, variables?: TVariables) {
   return async (): Promise<TData> => {
@@ -28,67 +32,44 @@ function fetcher<TData, TVariables>(endpoint: string, requestInit: RequestInit,
   }
 }`;
     }
-    generateInfiniteQueryHook(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables) {
-        const variables = (0, variables_generator_js_1.generateQueryVariablesSignature)(hasRequiredVariables, operationVariablesTypes);
-        const hookConfig = this.visitor.queryMethodMap;
-        this.visitor.reactQueryHookIdentifiersInUse.add(hookConfig.infiniteQuery.hook);
-        this.visitor.reactQueryOptionsIdentifiersInUse.add(hookConfig.infiniteQuery.options);
-        const options = `options?: ${hookConfig.infiniteQuery.options}<${operationResultType}, TError, TData>`;
-        return `export const useInfinite${operationName} = <
-      TData = ${operationResultType},
-      TError = ${this.visitor.config.errorType}
-    >(
+    generateInfiniteQueryHook(config, isSuspense = false) {
+        const { generateBaseInfiniteQueryHook, variables, options } = this.generateInfiniteQueryHelper(config, isSuspense);
+        const { documentVariableName, operationResultType, operationVariablesTypes } = config;
+        return generateBaseInfiniteQueryHook({
+            implArguments: `
       dataSource: { endpoint: string, fetchParams?: RequestInit },
       ${variables},
       ${options}
-    ) =>
-    ${hookConfig.infiniteQuery.hook}<${operationResultType}, TError, TData>(
-      ${(0, variables_generator_js_1.generateInfiniteQueryKey)(node, hasRequiredVariables)},
-      (metaData) => fetcher<${operationResultType}, ${operationVariablesTypes}>(dataSource.endpoint, dataSource.fetchParams || {}, ${documentVariableName}, {...variables, ...(metaData.pageParam ?? {})})(),
-      options
-    );`;
+    `,
+            implFetcher: `(metaData) => fetcher<${operationResultType}, ${operationVariablesTypes}>(dataSource.endpoint, dataSource.fetchParams || {}, ${documentVariableName}, {...variables, ...(metaData.pageParam ?? {})})()`,
+        });
     }
-    generateQueryHook(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables) {
-        const variables = (0, variables_generator_js_1.generateQueryVariablesSignature)(hasRequiredVariables, operationVariablesTypes);
-        const hookConfig = this.visitor.queryMethodMap;
-        this.visitor.reactQueryHookIdentifiersInUse.add(hookConfig.query.hook);
-        this.visitor.reactQueryOptionsIdentifiersInUse.add(hookConfig.query.options);
-        const options = `options?: ${hookConfig.query.options}<${operationResultType}, TError, TData>`;
-        return `export const use${operationName} = <
-      TData = ${operationResultType},
-      TError = ${this.visitor.config.errorType}
-    >(
+    generateQueryHook(config, isSuspense = false) {
+        const { generateBaseQueryHook, variables, options } = this.generateQueryHelper(config, isSuspense);
+        const { documentVariableName, operationResultType, operationVariablesTypes } = config;
+        return generateBaseQueryHook({
+            implArguments: `
       dataSource: { endpoint: string, fetchParams?: RequestInit },
       ${variables},
       ${options}
-    ) =>
-    ${hookConfig.query.hook}<${operationResultType}, TError, TData>(
-      ${(0, variables_generator_js_1.generateQueryKey)(node, hasRequiredVariables)},
-      fetcher<${operationResultType}, ${operationVariablesTypes}>(dataSource.endpoint, dataSource.fetchParams || {}, ${documentVariableName}, variables),
-      options
-    );`;
+    `,
+            implFetcher: `fetcher<${operationResultType}, ${operationVariablesTypes}>(dataSource.endpoint, dataSource.fetchParams || {}, ${documentVariableName}, variables)`,
+        });
     }
-    generateMutationHook(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables) {
-        const variables = `variables?: ${operationVariablesTypes}`;
-        const hookConfig = this.visitor.queryMethodMap;
-        this.visitor.reactQueryHookIdentifiersInUse.add(hookConfig.mutation.hook);
-        this.visitor.reactQueryOptionsIdentifiersInUse.add(hookConfig.mutation.options);
-        const options = `options?: ${hookConfig.mutation.options}<${operationResultType}, TError, ${operationVariablesTypes}, TContext>`;
-        return `export const use${operationName} = <
-      TError = ${this.visitor.config.errorType},
-      TContext = unknown
-    >(
+    generateMutationHook(config) {
+        const { generateBaseMutationHook, variables, options } = this.generateMutationHelper(config);
+        const { documentVariableName, operationResultType, operationVariablesTypes } = config;
+        return generateBaseMutationHook({
+            implArguments: `
       dataSource: { endpoint: string, fetchParams?: RequestInit },
       ${options}
-    ) =>
-    ${hookConfig.mutation.hook}<${operationResultType}, TError, ${operationVariablesTypes}, TContext>(
-      ${(0, variables_generator_js_1.generateMutationKey)(node)},
-      (${variables}) => fetcher<${operationResultType}, ${operationVariablesTypes}>(dataSource.endpoint, dataSource.fetchParams || {}, ${documentVariableName}, variables)(),
-      options
-    );`;
+    `,
+            implFetcher: `(${variables}) => fetcher<${operationResultType}, ${operationVariablesTypes}>(dataSource.endpoint, dataSource.fetchParams || {}, ${documentVariableName}, variables)()`,
+        });
     }
-    generateFetcherFetch(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables) {
-        const variables = (0, variables_generator_js_1.generateQueryVariablesSignature)(hasRequiredVariables, operationVariablesTypes);
+    generateFetcherFetch(config) {
+        const { documentVariableName, operationResultType, operationVariablesTypes, operationName } = config;
+        const variables = this.generateQueryVariablesSignature(config);
         return `\nuse${operationName}.fetcher = (dataSource: { endpoint: string, fetchParams?: RequestInit }, ${variables}) => fetcher<${operationResultType}, ${operationVariablesTypes}>(dataSource.endpoint, dataSource.fetchParams || {}, ${documentVariableName}, variables);`;
     }
 }

package/cjs/fetcher-graphql-request.js

@@ -1,13 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.GraphQLRequestClientFetcher = void 0;
-const variables_generator_js_1 = require("./variables-generator.js");
-class GraphQLRequestClientFetcher {
+const tslib_1 = require("tslib");
+const auto_bind_1 = tslib_1.__importDefault(require("auto-bind"));
+const fetcher_js_1 = require("./fetcher.js");
+class GraphQLRequestClientFetcher extends fetcher_js_1.FetcherRenderer {
     constructor(visitor, config) {
+        super(visitor);
         this.visitor = visitor;
         this.clientPath = typeof config === 'object' ? config.clientImportPath : null;
+        (0, auto_bind_1.default)(this);
     }
-    generateFetcherImplementaion() {
+    generateFetcherImplementation() {
         return this.clientPath
             ? `
 function fetcher<TData, TVariables extends { [key: string]: any }>(query: string, variables?: TVariables, requestHeaders?: RequestInit['headers']) {
@@ -26,125 +30,87 @@ function fetcher<TData, TVariables extends { [key: string]: any }>(client: Graph
   });
 }`;
     }
-    generateInfiniteQueryHook(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables) {
-        const variables = (0, variables_generator_js_1.generateQueryVariablesSignature)(hasRequiredVariables, operationVariablesTypes);
+    generateInfiniteQueryHook(config, isSuspense = false) {
         const typeImport = this.visitor.config.useTypeImports ? 'import type' : 'import';
         if (this.clientPath)
             this.visitor.imports.add(this.clientPath);
         this.visitor.imports.add(`${typeImport} { GraphQLClient } from 'graphql-request';`);
-        const hookConfig = this.visitor.queryMethodMap;
-        this.visitor.reactQueryHookIdentifiersInUse.add(hookConfig.infiniteQuery.hook);
-        this.visitor.reactQueryOptionsIdentifiersInUse.add(hookConfig.infiniteQuery.options);
-        const options = `options?: ${hookConfig.infiniteQuery.options}<${operationResultType}, TError, TData>`;
+        const { generateBaseInfiniteQueryHook, variables, options } = this.generateInfiniteQueryHelper(config, isSuspense);
+        const { documentVariableName, operationResultType, operationVariablesTypes } = config;
         return this.clientPath
-            ? `export const useInfinite${operationName} = <
-      TData = ${operationResultType},
-      TError = ${this.visitor.config.errorType}
-    >(
+            ? generateBaseInfiniteQueryHook({
+                implArguments: `
       pageParamKey: keyof ${operationVariablesTypes},
       ${variables},
       ${options},
       headers?: RequestInit['headers']
-    ) =>
-    ${hookConfig.infiniteQuery.hook}<${operationResultType}, TError, TData>(
-      ${(0, variables_generator_js_1.generateInfiniteQueryKey)(node, hasRequiredVariables)},
-      (metaData) => fetcher<${operationResultType}, ${operationVariablesTypes}>(${documentVariableName}, {...variables, ...(metaData.pageParam ?? {})}, headers)(),
-      options
-    );`
-            : `export const useInfinite${operationName} = <
-      TData = ${operationResultType},
-      TError = ${this.visitor.config.errorType}
-    >(
+    `,
+                implFetcher: `(metaData) => fetcher<${operationResultType}, ${operationVariablesTypes}>(${documentVariableName}, {...variables, [pageParamKey]: metaData.pageParam}, headers)()`,
+            })
+            : generateBaseInfiniteQueryHook({
+                implArguments: `
       client: GraphQLClient,
       ${variables},
       ${options},
       headers?: RequestInit['headers']
-    ) =>
-    ${hookConfig.infiniteQuery.hook}<${operationResultType}, TError, TData>(
-      ${(0, variables_generator_js_1.generateInfiniteQueryKey)(node, hasRequiredVariables)},
-      (metaData) => fetcher<${operationResultType}, ${operationVariablesTypes}>(client, ${documentVariableName}, {...variables, ...(metaData.pageParam ?? {})}, headers)(),
-      options
-    );`;
+    `,
+                implFetcher: `(metaData) => fetcher<${operationResultType}, ${operationVariablesTypes}>(client, ${documentVariableName}, {...variables, ...(metaData.pageParam ?? {})}, headers)()`,
+            });
     }
-    generateQueryHook(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables) {
-        const variables = (0, variables_generator_js_1.generateQueryVariablesSignature)(hasRequiredVariables, operationVariablesTypes);
+    generateQueryHook(config, isSuspense = false) {
         const typeImport = this.visitor.config.useTypeImports ? 'import type' : 'import';
         if (this.clientPath)
             this.visitor.imports.add(this.clientPath);
         this.visitor.imports.add(`${typeImport} { GraphQLClient } from 'graphql-request';`);
         this.visitor.imports.add(`${typeImport} { RequestInit } from 'graphql-request/dist/types.dom';`);
-        const hookConfig = this.visitor.queryMethodMap;
-        this.visitor.reactQueryHookIdentifiersInUse.add(hookConfig.query.hook);
-        this.visitor.reactQueryOptionsIdentifiersInUse.add(hookConfig.query.options);
-        const options = `options?: ${hookConfig.query.options}<${operationResultType}, TError, TData>`;
+        const { generateBaseQueryHook, variables, options } = this.generateQueryHelper(config, isSuspense);
+        const { documentVariableName, operationResultType, operationVariablesTypes } = config;
         return this.clientPath
-            ? `export const use${operationName} = <
-      TData = ${operationResultType},
-      TError = ${this.visitor.config.errorType}
-    >(
+            ? generateBaseQueryHook({
+                implArguments: `
       ${variables},
       ${options},
       headers?: RequestInit['headers']
-    ) =>
-    ${hookConfig.query.hook}<${operationResultType}, TError, TData>(
-      ${(0, variables_generator_js_1.generateQueryKey)(node, hasRequiredVariables)},
-      fetcher<${operationResultType}, ${operationVariablesTypes}>(${documentVariableName}, variables, headers),
-      options
-    );`
-            : `export const use${operationName} = <
-      TData = ${operationResultType},
-      TError = ${this.visitor.config.errorType}
-    >(
+    `,
+                implFetcher: `fetcher<${operationResultType}, ${operationVariablesTypes}>(${documentVariableName}, variables, headers)`,
+            })
+            : generateBaseQueryHook({
+                implArguments: `
       client: GraphQLClient,
       ${variables},
       ${options},
       headers?: RequestInit['headers']
-    ) =>
-    ${hookConfig.query.hook}<${operationResultType}, TError, TData>(
-      ${(0, variables_generator_js_1.generateQueryKey)(node, hasRequiredVariables)},
-      fetcher<${operationResultType}, ${operationVariablesTypes}>(client, ${documentVariableName}, variables, headers),
-      options
-    );`;
+    `,
+                implFetcher: `fetcher<${operationResultType}, ${operationVariablesTypes}>(client, ${documentVariableName}, variables, headers)`,
+            });
     }
-    generateMutationHook(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables) {
-        const variables = `variables?: ${operationVariablesTypes}`;
+    generateMutationHook(config) {
         const typeImport = this.visitor.config.useTypeImports ? 'import type' : 'import';
         if (this.clientPath)
             this.visitor.imports.add(this.clientPath);
         this.visitor.imports.add(`${typeImport} { GraphQLClient } from 'graphql-request';`);
-        const hookConfig = this.visitor.queryMethodMap;
-        this.visitor.reactQueryHookIdentifiersInUse.add(hookConfig.mutation.hook);
-        this.visitor.reactQueryOptionsIdentifiersInUse.add(hookConfig.mutation.options);
-        const options = `options?: ${hookConfig.mutation.options}<${operationResultType}, TError, ${operationVariablesTypes}, TContext>`;
+        const { generateBaseMutationHook, variables, options } = this.generateMutationHelper(config);
+        const { documentVariableName, operationResultType, operationVariablesTypes } = config;
         return this.clientPath
-            ? `export const use${operationName} = <
-      TError = ${this.visitor.config.errorType},
-      TContext = unknown
-    >(
+            ? generateBaseMutationHook({
+                implArguments: `
       ${options},
       headers?: RequestInit['headers']
-    ) =>
-    ${hookConfig.mutation.hook}<${operationResultType}, TError, ${operationVariablesTypes}, TContext>(
-      ${(0, variables_generator_js_1.generateMutationKey)(node)},
-      (${variables}) => fetcher<${operationResultType}, ${operationVariablesTypes}>(${documentVariableName}, variables, headers)(),
-      options
-    );`
-            : `export const use${operationName} = <
-      TError = ${this.visitor.config.errorType},
-      TContext = unknown
-    >(
+    `,
+                implFetcher: `(${variables}) => fetcher<${operationResultType}, ${operationVariablesTypes}>(${documentVariableName}, variables, headers)()`,
+            })
+            : generateBaseMutationHook({
+                implArguments: `
       client: GraphQLClient,
       ${options},
       headers?: RequestInit['headers']
-    ) =>
-    ${hookConfig.mutation.hook}<${operationResultType}, TError, ${operationVariablesTypes}, TContext>(
-      ${(0, variables_generator_js_1.generateMutationKey)(node)},
-      (${variables}) => fetcher<${operationResultType}, ${operationVariablesTypes}>(client, ${documentVariableName}, variables, headers)(),
-      options
-    );`;
+    `,
+                implFetcher: `(${variables}) => fetcher<${operationResultType}, ${operationVariablesTypes}>(client, ${documentVariableName}, variables, headers)()`,
+            });
     }
-    generateFetcherFetch(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables) {
-        const variables = (0, variables_generator_js_1.generateQueryVariablesSignature)(hasRequiredVariables, operationVariablesTypes);
+    generateFetcherFetch(config) {
+        const { documentVariableName, operationResultType, operationVariablesTypes, operationName } = config;
+        const variables = this.generateQueryVariablesSignature(config);
         const typeImport = this.visitor.config.useTypeImports ? 'import type' : 'import';
         if (this.clientPath)
             this.visitor.imports.add(this.clientPath);