@graphql-codegen/typescript-react-query 3.2.3 → 3.3.2

package/config.d.ts

@@ -40,7 +40,7 @@ export interface ReactQueryRawPluginConfig extends Omit<RawClientSideBasePluginC
     exposeDocument?: boolean;
     /**
      * @default false
-     * @description For each generate query hook adds getKey(variables: QueryVariables) function. Useful for cache updates.
+     * @description For each generate query hook adds getKey(variables: QueryVariables) function. Useful for cache updates. If addInfiniteQuery is true, it will also add a getKey function to each infinite query.
      * @exampleMarkdown
      * ```ts
      * const query = useUserDetailsQuery(...)

package/index.js

@@ -19,6 +19,10 @@ function generateInfiniteQueryKey(node, hasRequiredVariables) {
         return `['${node.name.value}.infinite', variables]`;
     return `variables === undefined ? ['${node.name.value}.infinite'] : ['${node.name.value}.infinite', variables]`;
 }
+function generateInfiniteQueryKeyMaker(node, operationName, operationVariablesTypes, hasRequiredVariables) {
+    const signature = generateQueryVariablesSignature(hasRequiredVariables, operationVariablesTypes);
+    return `\nuseInfinite${operationName}.getKey = (${signature}) => ${generateInfiniteQueryKey(node, hasRequiredVariables)};\n`;
+}
 function generateQueryKey(node, hasRequiredVariables) {
     if (hasRequiredVariables)
         return `['${node.name.value}', variables]`;
@@ -65,8 +69,9 @@ class CustomMapperFetcher {
         this.visitor.reactQueryIdentifiersInUse.add(hookConfig.infiniteQuery.options);
         const options = `options?: ${hookConfig.infiniteQuery.options}<${operationResultType}, TError, TData>`;
         const typedFetcher = this.getFetcherFnName(operationResultType, operationVariablesTypes);
+        const implHookOuter = this._isReactHook ? `const query = ${typedFetcher}(${documentVariableName})` : '';
         const impl = this._isReactHook
-            ? `(metaData) => ${typedFetcher}(${documentVariableName}).bind(null, {...variables, ...(metaData.pageParam ?? {})})()`
+            ? `(metaData) => query({...variables, ...(metaData.pageParam ?? {})})`
             : `(metaData) => ${typedFetcher}(${documentVariableName}, {...variables, ...(metaData.pageParam ?? {})})()`;
         return `export const useInfinite${operationName} = <
       TData = ${operationResultType},
@@ -74,12 +79,13 @@ class CustomMapperFetcher {
     >(
       ${variables},
       ${options}
-    ) =>
-    ${hookConfig.infiniteQuery.hook}<${operationResultType}, TError, TData>(
+    ) =>{
+    ${implHookOuter}
+    return ${hookConfig.infiniteQuery.hook}<${operationResultType}, TError, TData>(
       ${generateInfiniteQueryKey(node, hasRequiredVariables)},
       ${impl},
       options
-    );`;
+    )};`;
     }
     generateQueryHook(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables) {
         const variables = `variables${hasRequiredVariables ? '' : '?'}: ${operationVariablesTypes}`;
@@ -514,6 +520,9 @@ class ReactQueryVisitor extends visitorPluginCommon.ClientSideBaseVisitor {
             }
             if (this.config.addInfiniteQuery) {
                 query += `\n${this.fetcher.generateInfiniteQueryHook(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables)}\n`;
+                if (this.config.exposeQueryKeys) {
+                    query += `\n${generateInfiniteQueryKeyMaker(node, operationName, 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

@@ -13,6 +13,10 @@ function generateInfiniteQueryKey(node, hasRequiredVariables) {
         return `['${node.name.value}.infinite', variables]`;
     return `variables === undefined ? ['${node.name.value}.infinite'] : ['${node.name.value}.infinite', variables]`;
 }
+function generateInfiniteQueryKeyMaker(node, operationName, operationVariablesTypes, hasRequiredVariables) {
+    const signature = generateQueryVariablesSignature(hasRequiredVariables, operationVariablesTypes);
+    return `\nuseInfinite${operationName}.getKey = (${signature}) => ${generateInfiniteQueryKey(node, hasRequiredVariables)};\n`;
+}
 function generateQueryKey(node, hasRequiredVariables) {
     if (hasRequiredVariables)
         return `['${node.name.value}', variables]`;
@@ -59,8 +63,9 @@ class CustomMapperFetcher {
         this.visitor.reactQueryIdentifiersInUse.add(hookConfig.infiniteQuery.options);
         const options = `options?: ${hookConfig.infiniteQuery.options}<${operationResultType}, TError, TData>`;
         const typedFetcher = this.getFetcherFnName(operationResultType, operationVariablesTypes);
+        const implHookOuter = this._isReactHook ? `const query = ${typedFetcher}(${documentVariableName})` : '';
         const impl = this._isReactHook
-            ? `(metaData) => ${typedFetcher}(${documentVariableName}).bind(null, {...variables, ...(metaData.pageParam ?? {})})()`
+            ? `(metaData) => query({...variables, ...(metaData.pageParam ?? {})})`
             : `(metaData) => ${typedFetcher}(${documentVariableName}, {...variables, ...(metaData.pageParam ?? {})})()`;
         return `export const useInfinite${operationName} = <
       TData = ${operationResultType},
@@ -68,12 +73,13 @@ class CustomMapperFetcher {
     >(
       ${variables},
       ${options}
-    ) =>
-    ${hookConfig.infiniteQuery.hook}<${operationResultType}, TError, TData>(
+    ) =>{
+    ${implHookOuter}
+    return ${hookConfig.infiniteQuery.hook}<${operationResultType}, TError, TData>(
       ${generateInfiniteQueryKey(node, hasRequiredVariables)},
       ${impl},
       options
-    );`;
+    )};`;
     }
     generateQueryHook(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables) {
         const variables = `variables${hasRequiredVariables ? '' : '?'}: ${operationVariablesTypes}`;
@@ -508,6 +514,9 @@ class ReactQueryVisitor extends ClientSideBaseVisitor {
             }
             if (this.config.addInfiniteQuery) {
                 query += `\n${this.fetcher.generateInfiniteQueryHook(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables)}\n`;
+                if (this.config.exposeQueryKeys) {
+                    query += `\n${generateInfiniteQueryKeyMaker(node, operationName, 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,10 +1,9 @@
 {
   "name": "@graphql-codegen/typescript-react-query",
-  "version": "3.2.3",
+  "version": "3.3.2",
   "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",
-    "graphql-tag": "^2.0.0"
+    "graphql": "^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0"
   },
   "dependencies": {
     "@graphql-codegen/plugin-helpers": "^2.3.2",

package/variables-generator.d.ts

@@ -1,6 +1,7 @@
 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 generateInfiniteQueryKeyMaker(node: OperationDefinitionNode, operationName: string, operationVariablesTypes: string, 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;