@graphql-codegen/typescript-react-query 3.1.2-alpha-2113b7d34.0 → 3.2.1

package/config.d.ts

@@ -72,4 +72,9 @@ export interface ReactQueryRawPluginConfig extends Omit<RawClientSideBasePluginC
      * @description Changes the default "TError" generic type.
      */
     errorType?: string;
+    /**
+     * @default false
+     * @description Adds an Infinite Query along side the standard one
+     */
+    addInfiniteQuery?: boolean;
 }

package/fetcher-custom-mapper.d.ts

@@ -1,7 +1,7 @@
+import { CustomFetch } from './config';
+import { FetcherRenderer } from './fetcher';
 import { OperationDefinitionNode } from 'graphql';
 import { ReactQueryVisitor } from './visitor';
-import { FetcherRenderer } from './fetcher';
-import { CustomFetch } from './config';
 export declare class CustomMapperFetcher implements FetcherRenderer {
     private visitor;
     private _mapper;
@@ -9,6 +9,7 @@ export declare class CustomMapperFetcher implements FetcherRenderer {
     constructor(visitor: ReactQueryVisitor, customFetcher: CustomFetch);
     private getFetcherFnName;
     generateFetcherImplementaion(): string;
+    generateInfiniteQueryHook(node: OperationDefinitionNode, documentVariableName: string, operationName: string, operationResultType: string, operationVariablesTypes: string, hasRequiredVariables: boolean): string;
     generateQueryHook(node: OperationDefinitionNode, documentVariableName: string, operationName: string, operationResultType: string, operationVariablesTypes: string, hasRequiredVariables: boolean): string;
     generateMutationHook(node: OperationDefinitionNode, documentVariableName: string, operationName: string, operationResultType: string, operationVariablesTypes: string, hasRequiredVariables: boolean): string;
     generateFetcherFetch(node: OperationDefinitionNode, documentVariableName: string, operationName: string, operationResultType: string, operationVariablesTypes: string, hasRequiredVariables: boolean): string;

package/fetcher-fetch-hardcoded.d.ts

@@ -1,7 +1,7 @@
-import { OperationDefinitionNode } from 'graphql';
-import { ReactQueryVisitor } from './visitor';
 import { FetcherRenderer } from './fetcher';
 import { HardcodedFetch } from './config';
+import { OperationDefinitionNode } from 'graphql';
+import { ReactQueryVisitor } from './visitor';
 export declare class HardcodedFetchFetcher implements FetcherRenderer {
     private visitor;
     private config;
@@ -9,6 +9,7 @@ export declare class HardcodedFetchFetcher implements FetcherRenderer {
     private getEndpoint;
     private getFetchParams;
     generateFetcherImplementaion(): string;
+    generateInfiniteQueryHook(node: OperationDefinitionNode, documentVariableName: string, operationName: string, operationResultType: string, operationVariablesTypes: string, hasRequiredVariables: boolean): string;
     generateQueryHook(node: OperationDefinitionNode, documentVariableName: string, operationName: string, operationResultType: string, operationVariablesTypes: string, hasRequiredVariables: boolean): string;
     generateMutationHook(node: OperationDefinitionNode, documentVariableName: string, operationName: string, operationResultType: string, operationVariablesTypes: string, hasRequiredVariables: boolean): string;
     generateFetcherFetch(node: OperationDefinitionNode, documentVariableName: string, operationName: string, operationResultType: string, operationVariablesTypes: string, hasRequiredVariables: boolean): string;

package/fetcher-fetch.d.ts

@@ -1,10 +1,11 @@
+import { FetcherRenderer } from './fetcher';
 import { OperationDefinitionNode } from 'graphql';
 import { ReactQueryVisitor } from './visitor';
-import { FetcherRenderer } from './fetcher';
 export declare class FetchFetcher implements FetcherRenderer {
     private visitor;
     constructor(visitor: ReactQueryVisitor);
     generateFetcherImplementaion(): string;
+    generateInfiniteQueryHook(node: OperationDefinitionNode, documentVariableName: string, operationName: string, operationResultType: string, operationVariablesTypes: string, hasRequiredVariables: boolean): string;
     generateQueryHook(node: OperationDefinitionNode, documentVariableName: string, operationName: string, operationResultType: string, operationVariablesTypes: string, hasRequiredVariables: boolean): string;
     generateMutationHook(node: OperationDefinitionNode, documentVariableName: string, operationName: string, operationResultType: string, operationVariablesTypes: string, hasRequiredVariables: boolean): string;
     generateFetcherFetch(node: OperationDefinitionNode, documentVariableName: string, operationName: string, operationResultType: string, operationVariablesTypes: string, hasRequiredVariables: boolean): string;

package/fetcher-graphql-request.d.ts

@@ -1,10 +1,11 @@
+import { FetcherRenderer } from './fetcher';
 import { OperationDefinitionNode } from 'graphql';
 import { ReactQueryVisitor } from './visitor';
-import { FetcherRenderer } from './fetcher';
 export declare class GraphQLRequestClientFetcher implements FetcherRenderer {
     private visitor;
     constructor(visitor: ReactQueryVisitor);
     generateFetcherImplementaion(): string;
+    generateInfiniteQueryHook(node: OperationDefinitionNode, documentVariableName: string, operationName: string, operationResultType: string, operationVariablesTypes: string, hasRequiredVariables: boolean): string;
     generateQueryHook(node: OperationDefinitionNode, documentVariableName: string, operationName: string, operationResultType: string, operationVariablesTypes: string, hasRequiredVariables: boolean): string;
     generateMutationHook(node: OperationDefinitionNode, documentVariableName: string, operationName: string, operationResultType: string, operationVariablesTypes: string, hasRequiredVariables: boolean): string;
     generateFetcherFetch(node: OperationDefinitionNode, documentVariableName: string, operationName: string, operationResultType: string, operationVariablesTypes: string, hasRequiredVariables: boolean): string;

package/fetcher.d.ts

@@ -2,6 +2,7 @@ import { OperationDefinitionNode } from 'graphql';
 export interface FetcherRenderer {
     generateFetcherImplementaion: () => string;
     generateQueryHook: (node: OperationDefinitionNode, documentVariableName: string, operationName: string, operationResultType: string, operationVariablesTypes: string, hasRequiredVariables: boolean) => string;
+    generateInfiniteQueryHook: (node: OperationDefinitionNode, documentVariableName: string, operationName: string, operationResultType: string, operationVariablesTypes: string, hasRequiredVariables: boolean) => string;
     generateMutationHook: (node: OperationDefinitionNode, documentVariableName: string, operationName: string, operationResultType: string, operationVariablesTypes: string, hasRequiredVariables: boolean) => string;
     generateFetcherFetch: (node: OperationDefinitionNode, documentVariableName: string, operationName: string, operationResultType: string, operationVariablesTypes: string, hasRequiredVariables: boolean) => string;
 }

package/index.d.ts

@@ -1,6 +1,6 @@
-import { Types, PluginValidateFn, PluginFunction } from '@graphql-codegen/plugin-helpers';
-import { ReactQueryVisitor } from './visitor';
+import { PluginFunction, PluginValidateFn, Types } from '@graphql-codegen/plugin-helpers';
 import { ReactQueryRawPluginConfig } from './config';
+import { ReactQueryVisitor } from './visitor';
 export declare const plugin: PluginFunction<ReactQueryRawPluginConfig, Types.ComplexPluginOutput>;
 export declare const validate: PluginValidateFn<any>;
 export { ReactQueryVisitor };

package/index.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
-const pluginHelpers = require('@graphql-codegen/plugin-helpers');
 const graphql = require('graphql');
+const pluginHelpers = require('@graphql-codegen/plugin-helpers');
 const visitorPluginCommon = require('@graphql-codegen/visitor-plugin-common');
 const autoBind = _interopDefault(require('auto-bind'));
 const changeCaseAll = require('change-case-all');
@@ -14,6 +14,11 @@ const path = require('path');
 function generateQueryVariablesSignature(hasRequiredVariables, operationVariablesTypes) {
     return `variables${hasRequiredVariables ? '' : '?'}: ${operationVariablesTypes}`;
 }
+function generateInfiniteQueryKey(node, hasRequiredVariables) {
+    if (hasRequiredVariables)
+        return `['${node.name.value}.infinite', variables]`;
+    return `variables === undefined ? ['${node.name.value}.infinite'] : ['${node.name.value}.infinite', variables]`;
+}
 function generateQueryKey(node, hasRequiredVariables) {
     if (hasRequiredVariables)
         return `['${node.name.value}', variables]`;
@@ -30,49 +35,72 @@ function generateMutationKeyMaker(node, operationName) {
     return `\nuse${operationName}.getKey = () => ${generateMutationKey(node)}};\n`;
 }
 
-class FetchFetcher {
-    constructor(visitor) {
+class CustomMapperFetcher {
+    constructor(visitor, customFetcher) {
         this.visitor = visitor;
+        if (typeof customFetcher === 'string') {
+            customFetcher = { func: customFetcher };
+        }
+        this._mapper = visitorPluginCommon.parseMapper(customFetcher.func);
+        this._isReactHook = customFetcher.isReactHook;
+    }
+    getFetcherFnName(operationResultType, operationVariablesTypes) {
+        return `${this._mapper.type}<${operationResultType}, ${operationVariablesTypes}>`;
     }
     generateFetcherImplementaion() {
-        return `
-function fetcher<TData, TVariables>(endpoint: string, requestInit: RequestInit, query: string, variables?: TVariables) {
-  return async (): Promise<TData> => {
-    const res = await fetch(endpoint, {
-      method: 'POST',
-      ...requestInit,
-      body: JSON.stringify({ query, variables }),
-    });
-
-    const json = await res.json();
-
-    if (json.errors) {
-      const { message } = json.errors[0];
-
-      throw new Error(message);
+        if (this._mapper.isExternal) {
+            return visitorPluginCommon.buildMapperImport(this._mapper.source, [
+                {
+                    identifier: this._mapper.type,
+                    asDefault: this._mapper.default,
+                },
+            ], this.visitor.config.useTypeImports);
+        }
+        return null;
     }
-
-    return json.data;
-  }
-}`;
+    generateInfiniteQueryHook(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables) {
+        const variables = `variables${hasRequiredVariables ? '' : '?'}: ${operationVariablesTypes}`;
+        const hookConfig = this.visitor.queryMethodMap;
+        this.visitor.reactQueryIdentifiersInUse.add(hookConfig.infiniteQuery.hook);
+        this.visitor.reactQueryIdentifiersInUse.add(hookConfig.infiniteQuery.options);
+        const options = `options?: ${hookConfig.infiniteQuery.options}<${operationResultType}, TError, TData>`;
+        const typedFetcher = this.getFetcherFnName(operationResultType, operationVariablesTypes);
+        const impl = this._isReactHook
+            ? `(metaData) => ${typedFetcher}(${documentVariableName}).bind(null, {...variables, ...(metaData.pageParam ?? {})})()`
+            : `(metaData) => ${typedFetcher}(${documentVariableName}, {...variables, ...(metaData.pageParam ?? {})})()`;
+        return `export const useInfinite${operationName} = <
+      TData = ${operationResultType},
+      TError = ${this.visitor.config.errorType}
+    >(
+      ${variables},
+      ${options}
+    ) =>
+    ${hookConfig.infiniteQuery.hook}<${operationResultType}, TError, TData>(
+      ${generateInfiniteQueryKey(node, hasRequiredVariables)},
+      ${impl},
+      options
+    );`;
     }
     generateQueryHook(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables) {
-        const variables = generateQueryVariablesSignature(hasRequiredVariables, operationVariablesTypes);
+        const variables = `variables${hasRequiredVariables ? '' : '?'}: ${operationVariablesTypes}`;
         const hookConfig = this.visitor.queryMethodMap;
         this.visitor.reactQueryIdentifiersInUse.add(hookConfig.query.hook);
         this.visitor.reactQueryIdentifiersInUse.add(hookConfig.query.options);
         const options = `options?: ${hookConfig.query.options}<${operationResultType}, TError, TData>`;
+        const typedFetcher = this.getFetcherFnName(operationResultType, operationVariablesTypes);
+        const impl = this._isReactHook
+            ? `${typedFetcher}(${documentVariableName}).bind(null, variables)`
+            : `${typedFetcher}(${documentVariableName}, variables)`;
         return `export const use${operationName} = <
       TData = ${operationResultType},
       TError = ${this.visitor.config.errorType}
     >(
-      dataSource: { endpoint: string, fetchParams?: RequestInit },
       ${variables},
       ${options}
     ) =>
     ${hookConfig.query.hook}<${operationResultType}, TError, TData>(
       ${generateQueryKey(node, hasRequiredVariables)},
-      fetcher<${operationResultType}, ${operationVariablesTypes}>(dataSource.endpoint, dataSource.fetchParams || {}, ${documentVariableName}, variables),
+      ${impl},
       options
     );`;
     }
@@ -82,52 +110,43 @@ function fetcher<TData, TVariables>(endpoint: string, requestInit: RequestInit,
         this.visitor.reactQueryIdentifiersInUse.add(hookConfig.mutation.hook);
         this.visitor.reactQueryIdentifiersInUse.add(hookConfig.mutation.options);
         const options = `options?: ${hookConfig.mutation.options}<${operationResultType}, TError, ${operationVariablesTypes}, TContext>`;
+        const typedFetcher = this.getFetcherFnName(operationResultType, operationVariablesTypes);
+        const impl = this._isReactHook
+            ? `${typedFetcher}(${documentVariableName})`
+            : `(${variables}) => ${typedFetcher}(${documentVariableName}, variables)()`;
         return `export const use${operationName} = <
       TError = ${this.visitor.config.errorType},
       TContext = unknown
-    >(
-      dataSource: { endpoint: string, fetchParams?: RequestInit },
-      ${options}
-    ) =>
+    >(${options}) =>
     ${hookConfig.mutation.hook}<${operationResultType}, TError, ${operationVariablesTypes}, TContext>(
       ${generateMutationKey(node)},
-      (${variables}) => fetcher<${operationResultType}, ${operationVariablesTypes}>(dataSource.endpoint, dataSource.fetchParams || {}, ${documentVariableName}, variables)(),
+      ${impl},
       options
     );`;
     }
     generateFetcherFetch(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables) {
-        const variables = generateQueryVariablesSignature(hasRequiredVariables, operationVariablesTypes);
-        return `\nuse${operationName}.fetcher = (dataSource: { endpoint: string, fetchParams?: RequestInit }, ${variables}) => fetcher<${operationResultType}, ${operationVariablesTypes}>(dataSource.endpoint, dataSource.fetchParams || {}, ${documentVariableName}, variables);`;
+        // 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)
+            return '';
+        const variables = `variables${hasRequiredVariables ? '' : '?'}: ${operationVariablesTypes}`;
+        const typedFetcher = this.getFetcherFnName(operationResultType, operationVariablesTypes);
+        const impl = `${typedFetcher}(${documentVariableName}, variables)`;
+        return `\nuse${operationName}.fetcher = (${variables}) => ${impl};`;
     }
 }
 
-class HardcodedFetchFetcher {
-    constructor(visitor, config) {
+class FetchFetcher {
+    constructor(visitor) {
         this.visitor = visitor;
-        this.config = config;
-    }
-    getEndpoint() {
-        try {
-            new URL(this.config.endpoint);
-            return JSON.stringify(this.config.endpoint);
-        }
-        catch (e) {
-            return `${this.config.endpoint} as string`;
-        }
-    }
-    getFetchParams() {
-        let fetchParamsPartial = '';
-        if (this.config.fetchParams) {
-            fetchParamsPartial = `\n    ...(${this.config.fetchParams}),`;
-        }
-        return `    method: "POST",${fetchParamsPartial}`;
     }
     generateFetcherImplementaion() {
         return `
-function fetcher<TData, TVariables>(query: string, variables?: TVariables) {
+function fetcher<TData, TVariables>(endpoint: string, requestInit: RequestInit, query: string, variables?: TVariables) {
   return async (): Promise<TData> => {
-    const res = await fetch(${this.getEndpoint()}, {
-${this.getFetchParams()}
+    const res = await fetch(endpoint, {
+      method: 'POST',
+      ...requestInit,
       body: JSON.stringify({ query, variables }),
     });
 
@@ -142,6 +161,27 @@ ${this.getFetchParams()}
     return json.data;
   }
 }`;
+    }
+    generateInfiniteQueryHook(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables) {
+        const variables = generateQueryVariablesSignature(hasRequiredVariables, operationVariablesTypes);
+        const hookConfig = this.visitor.queryMethodMap;
+        this.visitor.reactQueryIdentifiersInUse.add(hookConfig.infiniteQuery.hook);
+        this.visitor.reactQueryIdentifiersInUse.add(hookConfig.infiniteQuery.options);
+        const options = `options?: ${hookConfig.query.options}<${operationResultType}, TError, TData>`;
+        return `export const useInfinite${operationName} = <
+      TData = ${operationResultType},
+      TError = ${this.visitor.config.errorType}
+    >(
+      dataSource: { endpoint: string, fetchParams?: RequestInit },
+      pageParamKey: keyof ${operationVariablesTypes},
+      ${variables},
+      ${options}
+    ) =>
+    ${hookConfig.infiniteQuery.hook}<${operationResultType}, TError, TData>(
+      ${generateInfiniteQueryKey(node, hasRequiredVariables)},
+      (metaData) => fetcher<${operationResultType}, ${operationVariablesTypes}>(dataSource.endpoint, dataSource.fetchParams || {}, ${documentVariableName}, {...variables, ...(metaData.pageParam ?? {})})(),
+      options
+    );`;
     }
     generateQueryHook(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables) {
         const variables = generateQueryVariablesSignature(hasRequiredVariables, operationVariablesTypes);
@@ -153,12 +193,13 @@ ${this.getFetchParams()}
       TData = ${operationResultType},
       TError = ${this.visitor.config.errorType}
     >(
+      dataSource: { endpoint: string, fetchParams?: RequestInit },
       ${variables},
       ${options}
     ) =>
     ${hookConfig.query.hook}<${operationResultType}, TError, TData>(
       ${generateQueryKey(node, hasRequiredVariables)},
-      fetcher<${operationResultType}, ${operationVariablesTypes}>(${documentVariableName}, variables),
+      fetcher<${operationResultType}, ${operationVariablesTypes}>(dataSource.endpoint, dataSource.fetchParams || {}, ${documentVariableName}, variables),
       options
     );`;
     }
@@ -171,16 +212,19 @@ ${this.getFetchParams()}
         return `export const use${operationName} = <
       TError = ${this.visitor.config.errorType},
       TContext = unknown
-    >(${options}) =>
+    >(
+      dataSource: { endpoint: string, fetchParams?: RequestInit },
+      ${options}
+    ) =>
     ${hookConfig.mutation.hook}<${operationResultType}, TError, ${operationVariablesTypes}, TContext>(
       ${generateMutationKey(node)},
-      (${variables}) => fetcher<${operationResultType}, ${operationVariablesTypes}>(${documentVariableName}, variables)(),
+      (${variables}) => fetcher<${operationResultType}, ${operationVariablesTypes}>(dataSource.endpoint, dataSource.fetchParams || {}, ${documentVariableName}, variables)(),
       options
     );`;
     }
     generateFetcherFetch(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables) {
         const variables = generateQueryVariablesSignature(hasRequiredVariables, operationVariablesTypes);
-        return `\nuse${operationName}.fetcher = (${variables}) => fetcher<${operationResultType}, ${operationVariablesTypes}>(${documentVariableName}, variables);`;
+        return `\nuse${operationName}.fetcher = (dataSource: { endpoint: string, fetchParams?: RequestInit }, ${variables}) => fetcher<${operationResultType}, ${operationVariablesTypes}>(dataSource.endpoint, dataSource.fetchParams || {}, ${documentVariableName}, variables);`;
     }
 }
 
@@ -193,6 +237,31 @@ class GraphQLRequestClientFetcher {
 function fetcher<TData, TVariables>(client: GraphQLClient, query: string, variables?: TVariables, headers?: RequestInit['headers']) {
   return async (): Promise<TData> => client.request<TData, TVariables>(query, variables, headers);
 }`;
+    }
+    generateInfiniteQueryHook(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables) {
+        const variables = generateQueryVariablesSignature(hasRequiredVariables, operationVariablesTypes);
+        const typeImport = this.visitor.config.useTypeImports ? 'import type' : 'import';
+        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.reactQueryIdentifiersInUse.add(hookConfig.infiniteQuery.hook);
+        this.visitor.reactQueryIdentifiersInUse.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}
+    >(
+      pageParamKey: keyof ${operationVariablesTypes},
+      client: GraphQLClient,
+      ${variables},
+      ${options},
+      headers?: RequestInit['headers']
+    ) =>
+    ${hookConfig.infiniteQuery.hook}<${operationResultType}, TError, TData>(
+      ${generateInfiniteQueryKey(node, hasRequiredVariables)},
+      (metaData) => fetcher<${operationResultType}, ${operationVariablesTypes}>(client, ${documentVariableName}, {...variables, ...(metaData.pageParam ?? {})}, headers)(),
+      options
+    );`;
     }
     generateQueryHook(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables) {
         const variables = generateQueryVariablesSignature(hasRequiredVariables, operationVariablesTypes);
@@ -245,39 +314,74 @@ function fetcher<TData, TVariables>(client: GraphQLClient, query: string, variab
     }
 }
 
-class CustomMapperFetcher {
-    constructor(visitor, customFetcher) {
+class HardcodedFetchFetcher {
+    constructor(visitor, config) {
         this.visitor = visitor;
-        if (typeof customFetcher === 'string') {
-            customFetcher = { func: customFetcher };
+        this.config = config;
+    }
+    getEndpoint() {
+        try {
+            new URL(this.config.endpoint);
+            return JSON.stringify(this.config.endpoint);
+        }
+        catch (e) {
+            return `${this.config.endpoint} as string`;
         }
-        this._mapper = visitorPluginCommon.parseMapper(customFetcher.func);
-        this._isReactHook = customFetcher.isReactHook;
     }
-    getFetcherFnName(operationResultType, operationVariablesTypes) {
-        return `${this._mapper.type}<${operationResultType}, ${operationVariablesTypes}>`;
+    getFetchParams() {
+        let fetchParamsPartial = '';
+        if (this.config.fetchParams) {
+            fetchParamsPartial = `\n    ...(${this.config.fetchParams}),`;
+        }
+        return `    method: "POST",${fetchParamsPartial}`;
     }
     generateFetcherImplementaion() {
-        if (this._mapper.isExternal) {
-            return visitorPluginCommon.buildMapperImport(this._mapper.source, [
-                {
-                    identifier: this._mapper.type,
-                    asDefault: this._mapper.default,
-                },
-            ], this.visitor.config.useTypeImports);
-        }
-        return null;
+        return `
+function fetcher<TData, TVariables>(query: string, variables?: TVariables) {
+  return async (): Promise<TData> => {
+    const res = await fetch(${this.getEndpoint()}, {
+${this.getFetchParams()}
+      body: JSON.stringify({ query, variables }),
+    });
+
+    const json = await res.json();
+
+    if (json.errors) {
+      const { message } = json.errors[0];
+
+      throw new Error(message);
+    }
+
+    return json.data;
+  }
+}`;
+    }
+    generateInfiniteQueryHook(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables) {
+        const variables = generateQueryVariablesSignature(hasRequiredVariables, operationVariablesTypes);
+        const hookConfig = this.visitor.queryMethodMap;
+        this.visitor.reactQueryIdentifiersInUse.add(hookConfig.infiniteQuery.hook);
+        this.visitor.reactQueryIdentifiersInUse.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}
+    >(
+      pageParamKey: keyof ${operationVariablesTypes},
+      ${variables},
+      ${options}
+    ) =>
+    ${hookConfig.infiniteQuery.hook}<${operationResultType}, TError, TData>(
+      ${generateInfiniteQueryKey(node, hasRequiredVariables)},
+      (metaData) => fetcher<${operationResultType}, ${operationVariablesTypes}>(${documentVariableName}, {...variables, ...(metaData.pageParam ?? {})})(),
+      options
+    );`;
     }
     generateQueryHook(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables) {
-        const variables = `variables${hasRequiredVariables ? '' : '?'}: ${operationVariablesTypes}`;
+        const variables = generateQueryVariablesSignature(hasRequiredVariables, operationVariablesTypes);
         const hookConfig = this.visitor.queryMethodMap;
         this.visitor.reactQueryIdentifiersInUse.add(hookConfig.query.hook);
         this.visitor.reactQueryIdentifiersInUse.add(hookConfig.query.options);
         const options = `options?: ${hookConfig.query.options}<${operationResultType}, TError, TData>`;
-        const typedFetcher = this.getFetcherFnName(operationResultType, operationVariablesTypes);
-        const impl = this._isReactHook
-            ? `${typedFetcher}(${documentVariableName}).bind(null, variables)`
-            : `${typedFetcher}(${documentVariableName}, variables)`;
         return `export const use${operationName} = <
       TData = ${operationResultType},
       TError = ${this.visitor.config.errorType}
@@ -287,7 +391,7 @@ class CustomMapperFetcher {
     ) =>
     ${hookConfig.query.hook}<${operationResultType}, TError, TData>(
       ${generateQueryKey(node, hasRequiredVariables)},
-      ${impl},
+      fetcher<${operationResultType}, ${operationVariablesTypes}>(${documentVariableName}, variables),
       options
     );`;
     }
@@ -297,29 +401,19 @@ class CustomMapperFetcher {
         this.visitor.reactQueryIdentifiersInUse.add(hookConfig.mutation.hook);
         this.visitor.reactQueryIdentifiersInUse.add(hookConfig.mutation.options);
         const options = `options?: ${hookConfig.mutation.options}<${operationResultType}, TError, ${operationVariablesTypes}, TContext>`;
-        const typedFetcher = this.getFetcherFnName(operationResultType, operationVariablesTypes);
-        const impl = 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},
+      (${variables}) => fetcher<${operationResultType}, ${operationVariablesTypes}>(${documentVariableName}, variables)(),
       options
     );`;
     }
     generateFetcherFetch(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables) {
-        // 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)
-            return '';
-        const variables = `variables${hasRequiredVariables ? '' : '?'}: ${operationVariablesTypes}`;
-        const typedFetcher = this.getFetcherFnName(operationResultType, operationVariablesTypes);
-        const impl = `${typedFetcher}(${documentVariableName}, variables)`;
-        return `\nuse${operationName}.fetcher = (${variables}) => ${impl};`;
+        const variables = generateQueryVariablesSignature(hasRequiredVariables, operationVariablesTypes);
+        return `\nuse${operationName}.fetcher = (${variables}) => fetcher<${operationResultType}, ${operationVariablesTypes}>(${documentVariableName}, variables);`;
     }
 }
 
@@ -332,10 +426,15 @@ class ReactQueryVisitor extends visitorPluginCommon.ClientSideBaseVisitor {
             exposeQueryKeys: visitorPluginCommon.getConfigValue(rawConfig.exposeQueryKeys, false),
             exposeMutationKeys: visitorPluginCommon.getConfigValue(rawConfig.exposeMutationKeys, false),
             exposeFetcher: visitorPluginCommon.getConfigValue(rawConfig.exposeFetcher, false),
+            addInfiniteQuery: visitorPluginCommon.getConfigValue(rawConfig.addInfiniteQuery, false),
         });
         this.rawConfig = rawConfig;
         this.reactQueryIdentifiersInUse = new Set();
         this.queryMethodMap = {
+            infiniteQuery: {
+                hook: 'useInfiniteQuery',
+                options: 'UseInfiniteQueryOptions',
+            },
             query: {
                 hook: 'useQuery',
                 options: 'UseQueryOptions',
@@ -373,6 +472,9 @@ class ReactQueryVisitor extends visitorPluginCommon.ClientSideBaseVisitor {
         if (!this.hasOperations) {
             return baseImports;
         }
+        if (this.config.addInfiniteQuery) {
+            this.reactQueryIdentifiersInUse.add('QueryFunctionContext');
+        }
         return [...baseImports, `import { ${Array.from(this.reactQueryIdentifiersInUse).join(', ')} } from 'react-query';`];
     }
     getFetcherImplementation() {
@@ -407,7 +509,10 @@ class ReactQueryVisitor extends visitorPluginCommon.ClientSideBaseVisitor {
                 query += `\nuse${operationName}.document = ${documentVariableName};\n`;
             }
             if (this.config.exposeQueryKeys) {
-                query += generateQueryKeyMaker(node, operationName, operationVariablesTypes, hasRequiredVariables);
+                query += `\n${generateQueryKeyMaker(node, operationName, operationVariablesTypes, hasRequiredVariables)};\n`;
+            }
+            if (this.config.addInfiniteQuery) {
+                query += `\n${this.fetcher.generateInfiniteQueryHook(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables)}\n`;
             }
             // 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

package/index.mjs

@@ -1,5 +1,5 @@
-import { oldVisit } from '@graphql-codegen/plugin-helpers';
 import { concatAST, Kind } from 'graphql';
+import { oldVisit } from '@graphql-codegen/plugin-helpers';
 import { parseMapper, buildMapperImport, ClientSideBaseVisitor, DocumentMode, getConfigValue } from '@graphql-codegen/visitor-plugin-common';
 import autoBind from 'auto-bind';
 import { pascalCase } from 'change-case-all';
@@ -8,6 +8,11 @@ import { extname } from 'path';
 function generateQueryVariablesSignature(hasRequiredVariables, operationVariablesTypes) {
     return `variables${hasRequiredVariables ? '' : '?'}: ${operationVariablesTypes}`;
 }
+function generateInfiniteQueryKey(node, hasRequiredVariables) {
+    if (hasRequiredVariables)
+        return `['${node.name.value}.infinite', variables]`;
+    return `variables === undefined ? ['${node.name.value}.infinite'] : ['${node.name.value}.infinite', variables]`;
+}
 function generateQueryKey(node, hasRequiredVariables) {
     if (hasRequiredVariables)
         return `['${node.name.value}', variables]`;
@@ -24,49 +29,72 @@ function generateMutationKeyMaker(node, operationName) {
     return `\nuse${operationName}.getKey = () => ${generateMutationKey(node)}};\n`;
 }
 
-class FetchFetcher {
-    constructor(visitor) {
+class CustomMapperFetcher {
+    constructor(visitor, customFetcher) {
         this.visitor = visitor;
+        if (typeof customFetcher === 'string') {
+            customFetcher = { func: customFetcher };
+        }
+        this._mapper = parseMapper(customFetcher.func);
+        this._isReactHook = customFetcher.isReactHook;
+    }
+    getFetcherFnName(operationResultType, operationVariablesTypes) {
+        return `${this._mapper.type}<${operationResultType}, ${operationVariablesTypes}>`;
     }
     generateFetcherImplementaion() {
-        return `
-function fetcher<TData, TVariables>(endpoint: string, requestInit: RequestInit, query: string, variables?: TVariables) {
-  return async (): Promise<TData> => {
-    const res = await fetch(endpoint, {
-      method: 'POST',
-      ...requestInit,
-      body: JSON.stringify({ query, variables }),
-    });
-
-    const json = await res.json();
-
-    if (json.errors) {
-      const { message } = json.errors[0];
-
-      throw new Error(message);
+        if (this._mapper.isExternal) {
+            return buildMapperImport(this._mapper.source, [
+                {
+                    identifier: this._mapper.type,
+                    asDefault: this._mapper.default,
+                },
+            ], this.visitor.config.useTypeImports);
+        }
+        return null;
     }
-
-    return json.data;
-  }
-}`;
+    generateInfiniteQueryHook(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables) {
+        const variables = `variables${hasRequiredVariables ? '' : '?'}: ${operationVariablesTypes}`;
+        const hookConfig = this.visitor.queryMethodMap;
+        this.visitor.reactQueryIdentifiersInUse.add(hookConfig.infiniteQuery.hook);
+        this.visitor.reactQueryIdentifiersInUse.add(hookConfig.infiniteQuery.options);
+        const options = `options?: ${hookConfig.infiniteQuery.options}<${operationResultType}, TError, TData>`;
+        const typedFetcher = this.getFetcherFnName(operationResultType, operationVariablesTypes);
+        const impl = this._isReactHook
+            ? `(metaData) => ${typedFetcher}(${documentVariableName}).bind(null, {...variables, ...(metaData.pageParam ?? {})})()`
+            : `(metaData) => ${typedFetcher}(${documentVariableName}, {...variables, ...(metaData.pageParam ?? {})})()`;
+        return `export const useInfinite${operationName} = <
+      TData = ${operationResultType},
+      TError = ${this.visitor.config.errorType}
+    >(
+      ${variables},
+      ${options}
+    ) =>
+    ${hookConfig.infiniteQuery.hook}<${operationResultType}, TError, TData>(
+      ${generateInfiniteQueryKey(node, hasRequiredVariables)},
+      ${impl},
+      options
+    );`;
     }
     generateQueryHook(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables) {
-        const variables = generateQueryVariablesSignature(hasRequiredVariables, operationVariablesTypes);
+        const variables = `variables${hasRequiredVariables ? '' : '?'}: ${operationVariablesTypes}`;
         const hookConfig = this.visitor.queryMethodMap;
         this.visitor.reactQueryIdentifiersInUse.add(hookConfig.query.hook);
         this.visitor.reactQueryIdentifiersInUse.add(hookConfig.query.options);
         const options = `options?: ${hookConfig.query.options}<${operationResultType}, TError, TData>`;
+        const typedFetcher = this.getFetcherFnName(operationResultType, operationVariablesTypes);
+        const impl = this._isReactHook
+            ? `${typedFetcher}(${documentVariableName}).bind(null, variables)`
+            : `${typedFetcher}(${documentVariableName}, variables)`;
         return `export const use${operationName} = <
       TData = ${operationResultType},
       TError = ${this.visitor.config.errorType}
     >(
-      dataSource: { endpoint: string, fetchParams?: RequestInit },
       ${variables},
       ${options}
     ) =>
     ${hookConfig.query.hook}<${operationResultType}, TError, TData>(
       ${generateQueryKey(node, hasRequiredVariables)},
-      fetcher<${operationResultType}, ${operationVariablesTypes}>(dataSource.endpoint, dataSource.fetchParams || {}, ${documentVariableName}, variables),
+      ${impl},
       options
     );`;
     }
@@ -76,52 +104,43 @@ function fetcher<TData, TVariables>(endpoint: string, requestInit: RequestInit,
         this.visitor.reactQueryIdentifiersInUse.add(hookConfig.mutation.hook);
         this.visitor.reactQueryIdentifiersInUse.add(hookConfig.mutation.options);
         const options = `options?: ${hookConfig.mutation.options}<${operationResultType}, TError, ${operationVariablesTypes}, TContext>`;
+        const typedFetcher = this.getFetcherFnName(operationResultType, operationVariablesTypes);
+        const impl = this._isReactHook
+            ? `${typedFetcher}(${documentVariableName})`
+            : `(${variables}) => ${typedFetcher}(${documentVariableName}, variables)()`;
         return `export const use${operationName} = <
       TError = ${this.visitor.config.errorType},
       TContext = unknown
-    >(
-      dataSource: { endpoint: string, fetchParams?: RequestInit },
-      ${options}
-    ) =>
+    >(${options}) =>
     ${hookConfig.mutation.hook}<${operationResultType}, TError, ${operationVariablesTypes}, TContext>(
       ${generateMutationKey(node)},
-      (${variables}) => fetcher<${operationResultType}, ${operationVariablesTypes}>(dataSource.endpoint, dataSource.fetchParams || {}, ${documentVariableName}, variables)(),
+      ${impl},
       options
     );`;
     }
     generateFetcherFetch(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables) {
-        const variables = generateQueryVariablesSignature(hasRequiredVariables, operationVariablesTypes);
-        return `\nuse${operationName}.fetcher = (dataSource: { endpoint: string, fetchParams?: RequestInit }, ${variables}) => fetcher<${operationResultType}, ${operationVariablesTypes}>(dataSource.endpoint, dataSource.fetchParams || {}, ${documentVariableName}, variables);`;
+        // 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)
+            return '';
+        const variables = `variables${hasRequiredVariables ? '' : '?'}: ${operationVariablesTypes}`;
+        const typedFetcher = this.getFetcherFnName(operationResultType, operationVariablesTypes);
+        const impl = `${typedFetcher}(${documentVariableName}, variables)`;
+        return `\nuse${operationName}.fetcher = (${variables}) => ${impl};`;
     }
 }
 
-class HardcodedFetchFetcher {
-    constructor(visitor, config) {
+class FetchFetcher {
+    constructor(visitor) {
         this.visitor = visitor;
-        this.config = config;
-    }
-    getEndpoint() {
-        try {
-            new URL(this.config.endpoint);
-            return JSON.stringify(this.config.endpoint);
-        }
-        catch (e) {
-            return `${this.config.endpoint} as string`;
-        }
-    }
-    getFetchParams() {
-        let fetchParamsPartial = '';
-        if (this.config.fetchParams) {
-            fetchParamsPartial = `\n    ...(${this.config.fetchParams}),`;
-        }
-        return `    method: "POST",${fetchParamsPartial}`;
     }
     generateFetcherImplementaion() {
         return `
-function fetcher<TData, TVariables>(query: string, variables?: TVariables) {
+function fetcher<TData, TVariables>(endpoint: string, requestInit: RequestInit, query: string, variables?: TVariables) {
   return async (): Promise<TData> => {
-    const res = await fetch(${this.getEndpoint()}, {
-${this.getFetchParams()}
+    const res = await fetch(endpoint, {
+      method: 'POST',
+      ...requestInit,
       body: JSON.stringify({ query, variables }),
     });
 
@@ -136,6 +155,27 @@ ${this.getFetchParams()}
     return json.data;
   }
 }`;
+    }
+    generateInfiniteQueryHook(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables) {
+        const variables = generateQueryVariablesSignature(hasRequiredVariables, operationVariablesTypes);
+        const hookConfig = this.visitor.queryMethodMap;
+        this.visitor.reactQueryIdentifiersInUse.add(hookConfig.infiniteQuery.hook);
+        this.visitor.reactQueryIdentifiersInUse.add(hookConfig.infiniteQuery.options);
+        const options = `options?: ${hookConfig.query.options}<${operationResultType}, TError, TData>`;
+        return `export const useInfinite${operationName} = <
+      TData = ${operationResultType},
+      TError = ${this.visitor.config.errorType}
+    >(
+      dataSource: { endpoint: string, fetchParams?: RequestInit },
+      pageParamKey: keyof ${operationVariablesTypes},
+      ${variables},
+      ${options}
+    ) =>
+    ${hookConfig.infiniteQuery.hook}<${operationResultType}, TError, TData>(
+      ${generateInfiniteQueryKey(node, hasRequiredVariables)},
+      (metaData) => fetcher<${operationResultType}, ${operationVariablesTypes}>(dataSource.endpoint, dataSource.fetchParams || {}, ${documentVariableName}, {...variables, ...(metaData.pageParam ?? {})})(),
+      options
+    );`;
     }
     generateQueryHook(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables) {
         const variables = generateQueryVariablesSignature(hasRequiredVariables, operationVariablesTypes);
@@ -147,12 +187,13 @@ ${this.getFetchParams()}
       TData = ${operationResultType},
       TError = ${this.visitor.config.errorType}
     >(
+      dataSource: { endpoint: string, fetchParams?: RequestInit },
       ${variables},
       ${options}
     ) =>
     ${hookConfig.query.hook}<${operationResultType}, TError, TData>(
       ${generateQueryKey(node, hasRequiredVariables)},
-      fetcher<${operationResultType}, ${operationVariablesTypes}>(${documentVariableName}, variables),
+      fetcher<${operationResultType}, ${operationVariablesTypes}>(dataSource.endpoint, dataSource.fetchParams || {}, ${documentVariableName}, variables),
       options
     );`;
     }
@@ -165,16 +206,19 @@ ${this.getFetchParams()}
         return `export const use${operationName} = <
       TError = ${this.visitor.config.errorType},
       TContext = unknown
-    >(${options}) =>
+    >(
+      dataSource: { endpoint: string, fetchParams?: RequestInit },
+      ${options}
+    ) =>
     ${hookConfig.mutation.hook}<${operationResultType}, TError, ${operationVariablesTypes}, TContext>(
       ${generateMutationKey(node)},
-      (${variables}) => fetcher<${operationResultType}, ${operationVariablesTypes}>(${documentVariableName}, variables)(),
+      (${variables}) => fetcher<${operationResultType}, ${operationVariablesTypes}>(dataSource.endpoint, dataSource.fetchParams || {}, ${documentVariableName}, variables)(),
       options
     );`;
     }
     generateFetcherFetch(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables) {
         const variables = generateQueryVariablesSignature(hasRequiredVariables, operationVariablesTypes);
-        return `\nuse${operationName}.fetcher = (${variables}) => fetcher<${operationResultType}, ${operationVariablesTypes}>(${documentVariableName}, variables);`;
+        return `\nuse${operationName}.fetcher = (dataSource: { endpoint: string, fetchParams?: RequestInit }, ${variables}) => fetcher<${operationResultType}, ${operationVariablesTypes}>(dataSource.endpoint, dataSource.fetchParams || {}, ${documentVariableName}, variables);`;
     }
 }
 
@@ -187,6 +231,31 @@ class GraphQLRequestClientFetcher {
 function fetcher<TData, TVariables>(client: GraphQLClient, query: string, variables?: TVariables, headers?: RequestInit['headers']) {
   return async (): Promise<TData> => client.request<TData, TVariables>(query, variables, headers);
 }`;
+    }
+    generateInfiniteQueryHook(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables) {
+        const variables = generateQueryVariablesSignature(hasRequiredVariables, operationVariablesTypes);
+        const typeImport = this.visitor.config.useTypeImports ? 'import type' : 'import';
+        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.reactQueryIdentifiersInUse.add(hookConfig.infiniteQuery.hook);
+        this.visitor.reactQueryIdentifiersInUse.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}
+    >(
+      pageParamKey: keyof ${operationVariablesTypes},
+      client: GraphQLClient,
+      ${variables},
+      ${options},
+      headers?: RequestInit['headers']
+    ) =>
+    ${hookConfig.infiniteQuery.hook}<${operationResultType}, TError, TData>(
+      ${generateInfiniteQueryKey(node, hasRequiredVariables)},
+      (metaData) => fetcher<${operationResultType}, ${operationVariablesTypes}>(client, ${documentVariableName}, {...variables, ...(metaData.pageParam ?? {})}, headers)(),
+      options
+    );`;
     }
     generateQueryHook(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables) {
         const variables = generateQueryVariablesSignature(hasRequiredVariables, operationVariablesTypes);
@@ -239,39 +308,74 @@ function fetcher<TData, TVariables>(client: GraphQLClient, query: string, variab
     }
 }
 
-class CustomMapperFetcher {
-    constructor(visitor, customFetcher) {
+class HardcodedFetchFetcher {
+    constructor(visitor, config) {
         this.visitor = visitor;
-        if (typeof customFetcher === 'string') {
-            customFetcher = { func: customFetcher };
+        this.config = config;
+    }
+    getEndpoint() {
+        try {
+            new URL(this.config.endpoint);
+            return JSON.stringify(this.config.endpoint);
+        }
+        catch (e) {
+            return `${this.config.endpoint} as string`;
         }
-        this._mapper = parseMapper(customFetcher.func);
-        this._isReactHook = customFetcher.isReactHook;
     }
-    getFetcherFnName(operationResultType, operationVariablesTypes) {
-        return `${this._mapper.type}<${operationResultType}, ${operationVariablesTypes}>`;
+    getFetchParams() {
+        let fetchParamsPartial = '';
+        if (this.config.fetchParams) {
+            fetchParamsPartial = `\n    ...(${this.config.fetchParams}),`;
+        }
+        return `    method: "POST",${fetchParamsPartial}`;
     }
     generateFetcherImplementaion() {
-        if (this._mapper.isExternal) {
-            return buildMapperImport(this._mapper.source, [
-                {
-                    identifier: this._mapper.type,
-                    asDefault: this._mapper.default,
-                },
-            ], this.visitor.config.useTypeImports);
-        }
-        return null;
+        return `
+function fetcher<TData, TVariables>(query: string, variables?: TVariables) {
+  return async (): Promise<TData> => {
+    const res = await fetch(${this.getEndpoint()}, {
+${this.getFetchParams()}
+      body: JSON.stringify({ query, variables }),
+    });
+
+    const json = await res.json();
+
+    if (json.errors) {
+      const { message } = json.errors[0];
+
+      throw new Error(message);
+    }
+
+    return json.data;
+  }
+}`;
+    }
+    generateInfiniteQueryHook(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables) {
+        const variables = generateQueryVariablesSignature(hasRequiredVariables, operationVariablesTypes);
+        const hookConfig = this.visitor.queryMethodMap;
+        this.visitor.reactQueryIdentifiersInUse.add(hookConfig.infiniteQuery.hook);
+        this.visitor.reactQueryIdentifiersInUse.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}
+    >(
+      pageParamKey: keyof ${operationVariablesTypes},
+      ${variables},
+      ${options}
+    ) =>
+    ${hookConfig.infiniteQuery.hook}<${operationResultType}, TError, TData>(
+      ${generateInfiniteQueryKey(node, hasRequiredVariables)},
+      (metaData) => fetcher<${operationResultType}, ${operationVariablesTypes}>(${documentVariableName}, {...variables, ...(metaData.pageParam ?? {})})(),
+      options
+    );`;
     }
     generateQueryHook(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables) {
-        const variables = `variables${hasRequiredVariables ? '' : '?'}: ${operationVariablesTypes}`;
+        const variables = generateQueryVariablesSignature(hasRequiredVariables, operationVariablesTypes);
         const hookConfig = this.visitor.queryMethodMap;
         this.visitor.reactQueryIdentifiersInUse.add(hookConfig.query.hook);
         this.visitor.reactQueryIdentifiersInUse.add(hookConfig.query.options);
         const options = `options?: ${hookConfig.query.options}<${operationResultType}, TError, TData>`;
-        const typedFetcher = this.getFetcherFnName(operationResultType, operationVariablesTypes);
-        const impl = this._isReactHook
-            ? `${typedFetcher}(${documentVariableName}).bind(null, variables)`
-            : `${typedFetcher}(${documentVariableName}, variables)`;
         return `export const use${operationName} = <
       TData = ${operationResultType},
       TError = ${this.visitor.config.errorType}
@@ -281,7 +385,7 @@ class CustomMapperFetcher {
     ) =>
     ${hookConfig.query.hook}<${operationResultType}, TError, TData>(
       ${generateQueryKey(node, hasRequiredVariables)},
-      ${impl},
+      fetcher<${operationResultType}, ${operationVariablesTypes}>(${documentVariableName}, variables),
       options
     );`;
     }
@@ -291,29 +395,19 @@ class CustomMapperFetcher {
         this.visitor.reactQueryIdentifiersInUse.add(hookConfig.mutation.hook);
         this.visitor.reactQueryIdentifiersInUse.add(hookConfig.mutation.options);
         const options = `options?: ${hookConfig.mutation.options}<${operationResultType}, TError, ${operationVariablesTypes}, TContext>`;
-        const typedFetcher = this.getFetcherFnName(operationResultType, operationVariablesTypes);
-        const impl = 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},
+      (${variables}) => fetcher<${operationResultType}, ${operationVariablesTypes}>(${documentVariableName}, variables)(),
       options
     );`;
     }
     generateFetcherFetch(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables) {
-        // 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)
-            return '';
-        const variables = `variables${hasRequiredVariables ? '' : '?'}: ${operationVariablesTypes}`;
-        const typedFetcher = this.getFetcherFnName(operationResultType, operationVariablesTypes);
-        const impl = `${typedFetcher}(${documentVariableName}, variables)`;
-        return `\nuse${operationName}.fetcher = (${variables}) => ${impl};`;
+        const variables = generateQueryVariablesSignature(hasRequiredVariables, operationVariablesTypes);
+        return `\nuse${operationName}.fetcher = (${variables}) => fetcher<${operationResultType}, ${operationVariablesTypes}>(${documentVariableName}, variables);`;
     }
 }
 
@@ -326,10 +420,15 @@ class ReactQueryVisitor extends ClientSideBaseVisitor {
             exposeQueryKeys: getConfigValue(rawConfig.exposeQueryKeys, false),
             exposeMutationKeys: getConfigValue(rawConfig.exposeMutationKeys, false),
             exposeFetcher: getConfigValue(rawConfig.exposeFetcher, false),
+            addInfiniteQuery: getConfigValue(rawConfig.addInfiniteQuery, false),
         });
         this.rawConfig = rawConfig;
         this.reactQueryIdentifiersInUse = new Set();
         this.queryMethodMap = {
+            infiniteQuery: {
+                hook: 'useInfiniteQuery',
+                options: 'UseInfiniteQueryOptions',
+            },
             query: {
                 hook: 'useQuery',
                 options: 'UseQueryOptions',
@@ -367,6 +466,9 @@ class ReactQueryVisitor extends ClientSideBaseVisitor {
         if (!this.hasOperations) {
             return baseImports;
         }
+        if (this.config.addInfiniteQuery) {
+            this.reactQueryIdentifiersInUse.add('QueryFunctionContext');
+        }
         return [...baseImports, `import { ${Array.from(this.reactQueryIdentifiersInUse).join(', ')} } from 'react-query';`];
     }
     getFetcherImplementation() {
@@ -401,7 +503,10 @@ class ReactQueryVisitor extends ClientSideBaseVisitor {
                 query += `\nuse${operationName}.document = ${documentVariableName};\n`;
             }
             if (this.config.exposeQueryKeys) {
-                query += generateQueryKeyMaker(node, operationName, operationVariablesTypes, hasRequiredVariables);
+                query += `\n${generateQueryKeyMaker(node, operationName, operationVariablesTypes, hasRequiredVariables)};\n`;
+            }
+            if (this.config.addInfiniteQuery) {
+                query += `\n${this.fetcher.generateInfiniteQueryHook(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables)}\n`;
             }
             // 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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphql-codegen/typescript-react-query",
-  "version": "3.1.2-alpha-2113b7d34.0",
+  "version": "3.2.1",
   "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",
@@ -8,7 +8,7 @@
   },
   "dependencies": {
     "@graphql-codegen/plugin-helpers": "^2.3.0",
-    "@graphql-codegen/visitor-plugin-common": "2.5.1-alpha-2113b7d34.0",
+    "@graphql-codegen/visitor-plugin-common": "2.5.1",
     "auto-bind": "~4.0.0",
     "change-case-all": "1.0.14",
     "tslib": "~2.3.0"

package/variables-generator.d.ts

@@ -1,5 +1,6 @@
 import { OperationDefinitionNode } from 'graphql';
 export declare function generateQueryVariablesSignature(hasRequiredVariables: boolean, operationVariablesTypes: string): string;
+export declare function generateInfiniteQueryKey(node: OperationDefinitionNode, hasRequiredVariables: boolean): string;
 export declare function generateQueryKey(node: OperationDefinitionNode, hasRequiredVariables: boolean): string;
 export declare function generateQueryKeyMaker(node: OperationDefinitionNode, operationName: string, operationVariablesTypes: string, hasRequiredVariables: boolean): string;
 export declare function generateMutationKey(node: OperationDefinitionNode): string;

package/visitor.d.ts

@@ -1,16 +1,21 @@
-import { ClientSideBaseVisitor, ClientSideBasePluginConfig, LoadedFragment } from '@graphql-codegen/visitor-plugin-common';
+import { ClientSideBasePluginConfig, ClientSideBaseVisitor, LoadedFragment } from '@graphql-codegen/visitor-plugin-common';
+import { GraphQLSchema, OperationDefinitionNode } from 'graphql';
+import { FetcherRenderer } from './fetcher';
 import { ReactQueryRawPluginConfig } from './config';
-import { OperationDefinitionNode, GraphQLSchema } from 'graphql';
 import { Types } from '@graphql-codegen/plugin-helpers';
-import { FetcherRenderer } from './fetcher';
 export interface ReactQueryPluginConfig extends ClientSideBasePluginConfig {
     errorType: string;
     exposeDocument: boolean;
     exposeQueryKeys: boolean;
     exposeMutationKeys: boolean;
     exposeFetcher: boolean;
+    addInfiniteQuery: boolean;
 }
 export interface ReactQueryMethodMap {
+    infiniteQuery: {
+        hook: string;
+        options: string;
+    };
     query: {
         hook: string;
         options: string;