@graphql-codegen/typescript-react-query 5.1.0-alpha-20231024141714-d4d2e5e06 → 6.0.0

package/cjs/fetcher.js

@@ -0,0 +1,220 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FetcherRenderer = void 0;
+const tslib_1 = require("tslib");
+const auto_bind_1 = tslib_1.__importDefault(require("auto-bind"));
+class FetcherRenderer {
+    constructor(visitor) {
+        this.visitor = visitor;
+        (0, auto_bind_1.default)(this);
+    }
+    createQueryMethodMap(isSuspense = false) {
+        const suspenseText = isSuspense ? 'Suspense' : '';
+        const queryMethodMap = {
+            infiniteQuery: {
+                getHook: (operationName = 'Query') => `use${suspenseText}Infinite${operationName}`,
+                getOptions: () => `Use${suspenseText}InfiniteQueryOptions`,
+                getOtherTypes: () => ({ infiniteData: 'InfiniteData' }),
+            },
+            query: {
+                getHook: (operationName = 'Query') => `use${suspenseText}${operationName}`,
+                getOptions: () => `Use${suspenseText}QueryOptions`,
+            },
+            mutation: {
+                getHook: (operationName = 'Mutation') => `use${operationName}`,
+                getOptions: () => `UseMutationOptions`,
+            },
+        };
+        return queryMethodMap;
+    }
+    generateInfiniteQueryHelper(config, isSuspense) {
+        const { operationResultType, operationName } = config;
+        const { infiniteQuery } = this.createQueryMethodMap(isSuspense);
+        const isNextVersion = this.visitor.config.reactQueryVersion >= 5;
+        this.visitor.reactQueryHookIdentifiersInUse.add(infiniteQuery.getHook());
+        this.visitor.reactQueryOptionsIdentifiersInUse.add(infiniteQuery.getOptions());
+        if (isNextVersion) {
+            this.visitor.reactQueryOptionsIdentifiersInUse.add(infiniteQuery.getOtherTypes().infiniteData);
+        }
+        const variables = this.generateInfiniteQueryVariablesSignature(config);
+        const options = this.generateInfiniteQueryOptionsSignature(config, isSuspense);
+        const generateBaseInfiniteQueryHook = (hookConfig) => {
+            const { implArguments, implHookOuter = '', implFetcher } = hookConfig;
+            const argumentsResult = implArguments !== null && implArguments !== void 0 ? implArguments : `
+      ${variables},
+      ${options}
+    `;
+            return `export const ${infiniteQuery.getHook(operationName)} = <
+      TData = ${isNextVersion
+                ? `${infiniteQuery.getOtherTypes().infiniteData}<${operationResultType}>`
+                : operationResultType},
+      TError = ${this.visitor.config.errorType}
+    >(${argumentsResult}) => {
+    ${implHookOuter}
+    return ${infiniteQuery.getHook()}<${operationResultType}, TError, TData>(
+      ${this.generateInfiniteQueryFormattedParameters(this.generateInfiniteQueryKey(config, isSuspense), implFetcher)}
+    )};`;
+        };
+        return { generateBaseInfiniteQueryHook, variables, options };
+    }
+    generateQueryHelper(config, isSuspense) {
+        const { operationName, operationResultType } = config;
+        const { query } = this.createQueryMethodMap(isSuspense);
+        this.visitor.reactQueryHookIdentifiersInUse.add(query.getHook());
+        this.visitor.reactQueryOptionsIdentifiersInUse.add(query.getOptions());
+        const variables = this.generateQueryVariablesSignature(config);
+        const options = this.generateQueryOptionsSignature(config, isSuspense);
+        const generateBaseQueryHook = (hookConfig) => {
+            const { implArguments, implHookOuter = '', implFetcher } = hookConfig;
+            const argumentsResult = implArguments !== null && implArguments !== void 0 ? implArguments : `
+      ${variables},
+      ${options}
+    `;
+            return `export const ${query.getHook(operationName)} = <
+      TData = ${operationResultType},
+      TError = ${this.visitor.config.errorType}
+    >(${argumentsResult}) => {
+    ${implHookOuter}
+    return ${query.getHook()}<${operationResultType}, TError, TData>(
+      ${this.generateQueryFormattedParameters(this.generateQueryKey(config, isSuspense), implFetcher)}
+    )};`;
+        };
+        return {
+            generateBaseQueryHook,
+            variables,
+            options,
+        };
+    }
+    generateMutationHelper(config) {
+        const { operationResultType, operationVariablesTypes, operationName } = config;
+        const { mutation } = this.createQueryMethodMap();
+        this.visitor.reactQueryHookIdentifiersInUse.add(mutation.getHook());
+        this.visitor.reactQueryOptionsIdentifiersInUse.add(mutation.getOptions());
+        const variables = `variables?: ${operationVariablesTypes}`;
+        const options = `options?: ${mutation.getOptions()}<${operationResultType}, TError, ${operationVariablesTypes}, TContext>`;
+        const generateBaseMutationHook = (hookConfig) => {
+            const { implArguments, implHookOuter = '', implFetcher } = hookConfig;
+            const argumentsResult = implArguments !== null && implArguments !== void 0 ? implArguments : `${options}`;
+            return `export const ${mutation.getHook(operationName)} = <
+      TError = ${this.visitor.config.errorType},
+      TContext = unknown
+    >(${argumentsResult}) => {
+    ${implHookOuter}
+    return ${mutation.getHook()}<${operationResultType}, TError, ${operationVariablesTypes}, TContext>(
+      ${this.generateMutationFormattedParameters(this.generateMutationKey(config), implFetcher)}
+    )};`;
+        };
+        return {
+            generateBaseMutationHook,
+            variables,
+            options,
+        };
+    }
+    generateQueryVariablesSignature({ hasRequiredVariables, operationVariablesTypes, }) {
+        return `variables${hasRequiredVariables ? '' : '?'}: ${operationVariablesTypes}`;
+    }
+    generateQueryOptionsSignature({ operationResultType }, isSuspense) {
+        const { query } = this.createQueryMethodMap(isSuspense);
+        if (this.visitor.config.reactQueryVersion <= 4) {
+            return `options?: ${query.getOptions()}<${operationResultType}, TError, TData>`;
+        }
+        return `options?: Omit<${query.getOptions()}<${operationResultType}, TError, TData>, 'queryKey'> & { queryKey?: ${query.getOptions()}<${operationResultType}, TError, TData>['queryKey'] }`;
+    }
+    generateInfiniteQueryVariablesSignature(config) {
+        if (this.visitor.config.reactQueryVersion <= 4) {
+            return `variables${config.hasRequiredVariables ? '' : '?'}: ${config.operationVariablesTypes}`;
+        }
+        return `variables: ${config.operationVariablesTypes}`;
+    }
+    generateInfiniteQueryOptionsSignature({ operationResultType }, isSuspense) {
+        const { infiniteQuery } = this.createQueryMethodMap(isSuspense);
+        if (this.visitor.config.reactQueryVersion <= 4) {
+            return `options?: ${infiniteQuery.getOptions()}<${operationResultType}, TError, TData>`;
+        }
+        return `options: Omit<${infiniteQuery.getOptions()}<${operationResultType}, TError, TData>, 'queryKey'> & { queryKey?: ${infiniteQuery.getOptions()}<${operationResultType}, TError, TData>['queryKey'] }`;
+    }
+    generateInfiniteQueryKey(config, isSuspense) {
+        const identifier = isSuspense ? 'infiniteSuspense' : 'infinite';
+        if (config.hasRequiredVariables)
+            return `['${config.node.name.value}.${identifier}', variables]`;
+        return `variables === undefined ? ['${config.node.name.value}.${identifier}'] : ['${config.node.name.value}.${identifier}', variables]`;
+    }
+    generateInfiniteQueryOutput(config, isSuspense = false) {
+        const { infiniteQuery } = this.createQueryMethodMap(isSuspense);
+        const signature = this.generateQueryVariablesSignature(config);
+        const { operationName, node } = config;
+        return {
+            hook: this.generateInfiniteQueryHook(config, isSuspense),
+            getKey: `${infiniteQuery.getHook(operationName)}.getKey = (${signature}) => ${this.generateInfiniteQueryKey(config, isSuspense)};`,
+            rootKey: `${infiniteQuery.getHook(operationName)}.rootKey = '${node.name.value}.infinite';`,
+        };
+    }
+    generateQueryKey(config, isSuspense) {
+        const identifier = isSuspense ? `${config.node.name.value}Suspense` : config.node.name.value;
+        if (config.hasRequiredVariables)
+            return `['${identifier}', variables]`;
+        return `variables === undefined ? ['${identifier}'] : ['${identifier}', variables]`;
+    }
+    generateQueryOutput(config, isSuspense = false) {
+        const { query } = this.createQueryMethodMap(isSuspense);
+        const signature = this.generateQueryVariablesSignature(config);
+        const { operationName, node, documentVariableName } = config;
+        return {
+            hook: this.generateQueryHook(config, isSuspense),
+            document: `${query.getHook(operationName)}.document = ${documentVariableName};`,
+            getKey: `${query.getHook(operationName)}.getKey = (${signature}) => ${this.generateQueryKey(config, isSuspense)};`,
+            rootKey: `${query.getHook(operationName)}.rootKey = '${node.name.value}';`,
+        };
+    }
+    generateMutationKey({ node }) {
+        return `['${node.name.value}']`;
+    }
+    generateMutationOutput(config) {
+        const { mutation } = this.createQueryMethodMap();
+        const { operationName } = config;
+        return {
+            hook: this.generateMutationHook(config),
+            getKey: `${mutation.getHook(operationName)}.getKey = () => ${this.generateMutationKey(config)};`,
+        };
+    }
+    generateInfiniteQueryFormattedParameters(queryKey, queryFn) {
+        if (this.visitor.config.reactQueryVersion <= 4) {
+            return `${queryKey},
+      ${queryFn},
+      options`;
+        }
+        return `(() => {
+    const { queryKey: optionsQueryKey, ...restOptions } = options;
+    return {
+      queryKey: optionsQueryKey ?? ${queryKey},
+      queryFn: ${queryFn},
+      ...restOptions
+    }
+  })()`;
+    }
+    generateQueryFormattedParameters(queryKey, queryFn) {
+        if (this.visitor.config.reactQueryVersion <= 4) {
+            return `${queryKey},
+      ${queryFn},
+      options`;
+        }
+        return `{
+    queryKey: ${queryKey},
+    queryFn: ${queryFn},
+    ...options
+  }`;
+    }
+    generateMutationFormattedParameters(mutationKey, mutationFn) {
+        if (this.visitor.config.reactQueryVersion <= 4) {
+            return `${mutationKey},
+      ${mutationFn},
+      options`;
+        }
+        return `{
+    mutationKey: ${mutationKey},
+    mutationFn: ${mutationFn},
+    ...options
+  }`;
+    }
+}
+exports.FetcherRenderer = FetcherRenderer;

package/cjs/index.js

@@ -23,6 +23,7 @@ const plugin = (schema, documents, config) => {
         return {
             prepend: [...visitor.getImports(), visitor.getFetcherImplementation()],
             content: [
+                '',
                 visitor.fragments,
                 ...visitorResult.definitions.filter(t => typeof t === 'string'),
             ].join('\n'),
@@ -31,6 +32,7 @@ const plugin = (schema, documents, config) => {
     return {
         prepend: [...visitor.getImports()],
         content: [
+            '',
             visitor.fragments,
             ...visitorResult.definitions.filter(t => typeof t === 'string'),
         ].join('\n'),
@@ -41,5 +43,8 @@ const validate = async (schema, documents, config, outputFile) => {
     if ((0, path_1.extname)(outputFile) !== '.ts' && (0, path_1.extname)(outputFile) !== '.tsx') {
         throw new Error(`Plugin "typescript-react-query" requires extension to be ".ts" or ".tsx"!`);
     }
+    if (config.reactQueryVersion !== 5 && config.addSuspenseQuery) {
+        throw new Error(`Suspense queries are only supported in react-query@5. Please upgrade your react-query version.`);
+    }
 };
 exports.validate = validate;

package/cjs/visitor.js

@@ -9,9 +9,9 @@ const fetcher_custom_mapper_js_1 = require("./fetcher-custom-mapper.js");
 const fetcher_fetch_hardcoded_js_1 = require("./fetcher-fetch-hardcoded.js");
 const fetcher_fetch_js_1 = require("./fetcher-fetch.js");
 const fetcher_graphql_request_js_1 = require("./fetcher-graphql-request.js");
-const variables_generator_js_1 = require("./variables-generator.js");
 class ReactQueryVisitor extends visitor_plugin_common_1.ClientSideBaseVisitor {
     constructor(schema, fragments, rawConfig, documents) {
+        const defaultReactQueryVersion = !rawConfig.reactQueryVersion && rawConfig.legacyMode ? 3 : 4;
         super(schema, fragments, rawConfig, {
             documentMode: visitor_plugin_common_1.DocumentMode.string,
             errorType: (0, visitor_plugin_common_1.getConfigValue)(rawConfig.errorType, 'unknown'),
@@ -21,26 +21,13 @@ 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),
+            addSuspenseQuery: (0, visitor_plugin_common_1.getConfigValue)(rawConfig.addSuspenseQuery, false),
+            reactQueryVersion: (0, visitor_plugin_common_1.getConfigValue)(rawConfig.reactQueryVersion, defaultReactQueryVersion),
             reactQueryImportFrom: (0, visitor_plugin_common_1.getConfigValue)(rawConfig.reactQueryImportFrom, ''),
         });
         this.rawConfig = rawConfig;
         this.reactQueryHookIdentifiersInUse = new Set();
         this.reactQueryOptionsIdentifiersInUse = new Set();
-        this.queryMethodMap = {
-            infiniteQuery: {
-                hook: 'useInfiniteQuery',
-                options: 'UseInfiniteQueryOptions',
-            },
-            query: {
-                hook: 'useQuery',
-                options: 'UseQueryOptions',
-            },
-            mutation: {
-                hook: 'useMutation',
-                options: 'UseMutationOptions',
-            },
-        };
         this._externalImportPrefix = this.config.importOperationTypesFrom
             ? `${this.config.importOperationTypesFrom}.`
             : '';
@@ -77,13 +64,13 @@ class ReactQueryVisitor extends visitor_plugin_common_1.ClientSideBaseVisitor {
         ];
         const moduleName = this.config.reactQueryImportFrom
             ? this.config.reactQueryImportFrom
-            : this.config.legacyMode
+            : this.config.reactQueryVersion <= 3
                 ? 'react-query'
                 : '@tanstack/react-query';
         return [...baseImports, `import { ${hookAndTypeImports.join(', ')} } from '${moduleName}';`];
     }
     getFetcherImplementation() {
-        return this.fetcher.generateFetcherImplementaion();
+        return this.fetcher.generateFetcherImplementation();
     }
     _getHookSuffix(name, operationType) {
         if (this.config.omitOperationSuffix) {
@@ -106,45 +93,63 @@ class ReactQueryVisitor extends visitor_plugin_common_1.ClientSideBaseVisitor {
             useTypesPrefix: false,
             useTypesSuffix: false,
         });
+        const generateConfig = {
+            node,
+            documentVariableName,
+            operationResultType,
+            operationVariablesTypes,
+            hasRequiredVariables,
+            operationName,
+        };
         operationResultType = this._externalImportPrefix + operationResultType;
         operationVariablesTypes = this._externalImportPrefix + operationVariablesTypes;
+        const queries = [];
+        const getOutputFromQueries = () => `\n${queries.join('\n\n')}\n`;
         if (operationType === 'Query') {
-            let query = this.fetcher.generateQueryHook(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables);
-            if (this.config.exposeDocument) {
-                query += `\nuse${operationName}.document = ${documentVariableName};\n`;
-            }
-            if (this.config.exposeQueryKeys) {
-                query += `\n${(0, variables_generator_js_1.generateQueryKeyMaker)(node, operationName, operationVariablesTypes, hasRequiredVariables)};\n`;
-            }
-            if (this.config.exposeQueryRootKeys) {
-                query += `\n${(0, variables_generator_js_1.generateQueryRootKeyMaker)(node, operationName)}`;
-            }
+            const addQuery = (generateConfig, isSuspense = false) => {
+                const { hook, getKey, rootKey, document } = this.fetcher.generateQueryOutput(generateConfig, isSuspense);
+                queries.push(hook);
+                if (this.config.exposeDocument)
+                    queries.push(document);
+                if (this.config.exposeQueryKeys)
+                    queries.push(getKey);
+                if (this.config.exposeQueryRootKeys)
+                    queries.push(rootKey);
+            };
+            addQuery(generateConfig);
+            if (this.config.addSuspenseQuery)
+                addQuery(generateConfig, true);
             if (this.config.addInfiniteQuery) {
-                query += `\n${this.fetcher.generateInfiniteQueryHook(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables)}\n`;
-                if (this.config.exposeQueryKeys) {
-                    query += `\n${(0, variables_generator_js_1.generateInfiniteQueryKeyMaker)(node, operationName, operationVariablesTypes, hasRequiredVariables)};\n`;
-                }
-                if (this.config.exposeQueryRootKeys) {
-                    query += `\n${(0, variables_generator_js_1.generateInfiniteQueryRootKeyMaker)(node, operationName)}`;
+                const addInfiniteQuery = (generateConfig, isSuspense = false) => {
+                    const { hook, getKey, rootKey } = this.fetcher.generateInfiniteQueryOutput(generateConfig, isSuspense);
+                    queries.push(hook);
+                    if (this.config.exposeQueryKeys)
+                        queries.push(getKey);
+                    if (this.config.exposeQueryRootKeys)
+                        queries.push(rootKey);
+                };
+                addInfiniteQuery(generateConfig);
+                if (this.config.addSuspenseQuery) {
+                    addInfiniteQuery(generateConfig, true);
                 }
             }
             // The reason we're looking at the private field of the CustomMapperFetcher to see if it's a react hook
             // is to prevent calling generateFetcherFetch for each query since all the queries won't be able to generate
             // a fetcher field anyways.
             if (this.config.exposeFetcher && !this.fetcher._isReactHook) {
-                query += this.fetcher.generateFetcherFetch(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables);
+                queries.push(this.fetcher.generateFetcherFetch(generateConfig));
             }
-            return query;
+            return getOutputFromQueries();
         }
         if (operationType === 'Mutation') {
-            let query = this.fetcher.generateMutationHook(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables);
-            if (this.config.exposeMutationKeys) {
-                query += (0, variables_generator_js_1.generateMutationKeyMaker)(node, operationName);
-            }
+            const { hook, getKey } = this.fetcher.generateMutationOutput(generateConfig);
+            queries.push(hook);
+            if (this.config.exposeMutationKeys)
+                queries.push(getKey);
             if (this.config.exposeFetcher && !this.fetcher._isReactHook) {
-                query += this.fetcher.generateFetcherFetch(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables);
+                queries.push(this.fetcher.generateFetcherFetch(generateConfig));
             }
-            return query;
+            return getOutputFromQueries();
         }
         if (operationType === 'Subscription') {
             // eslint-disable-next-line no-console

package/esm/fetcher-custom-mapper.js

@@ -1,18 +1,21 @@
+import autoBind from 'auto-bind';
 import { buildMapperImport, parseMapper, } from '@graphql-codegen/visitor-plugin-common';
-import { generateInfiniteQueryKey, generateMutationKey, generateQueryKey, } from './variables-generator.js';
-export class CustomMapperFetcher {
+import { FetcherRenderer } from './fetcher.js';
+export class CustomMapperFetcher extends FetcherRenderer {
     constructor(visitor, customFetcher) {
+        super(visitor);
         this.visitor = visitor;
         if (typeof customFetcher === 'string') {
             customFetcher = { func: customFetcher };
         }
         this._mapper = parseMapper(customFetcher.func);
         this._isReactHook = customFetcher.isReactHook;
+        autoBind(this);
     }
     getFetcherFnName(operationResultType, operationVariablesTypes) {
         return `${this._mapper.type}<${operationResultType}, ${operationVariablesTypes}>`;
     }
-    generateFetcherImplementaion() {
+    generateFetcherImplementation() {
         if (this._mapper.isExternal) {
             return buildMapperImport(this._mapper.source, [
                 {
@@ -23,77 +26,45 @@ export 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>(
-      ${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>(
-      ${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>(
-      ${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/esm/fetcher-fetch-hardcoded.js

@@ -1,8 +1,11 @@
-import { generateInfiniteQueryKey, generateMutationKey, generateQueryKey, generateQueryVariablesSignature, } from './variables-generator.js';
-export class HardcodedFetchFetcher {
+import autoBind from 'auto-bind';
+import { FetcherRenderer } from './fetcher.js';
+export class HardcodedFetchFetcher extends FetcherRenderer {
     constructor(visitor, config) {
+        super(visitor);
         this.visitor = visitor;
         this.config = config;
+        autoBind(this);
     }
     getEndpoint() {
         try {
@@ -23,7 +26,7 @@ export class HardcodedFetchFetcher {
         }
         return `    method: "POST",${fetchParamsPartial}`;
     }
-    generateFetcherImplementaion() {
+    generateFetcherImplementation() {
         return `
 function fetcher<TData, TVariables>(query: string, variables?: TVariables) {
   return async (): Promise<TData> => {
@@ -44,62 +47,30 @@ ${this.getFetchParams()}
   }
 }`;
     }
-    generateInfiniteQueryHook(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables) {
-        const variables = 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>(
-      ${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 = 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>(
-      ${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>(
-      ${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 = 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);`;
     }
 }