@graphql-codegen/typescript-react-query 3.3.1 → 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]`;
@@ -516,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]`;
@@ -510,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,6 +1,6 @@
 {
   "name": "@graphql-codegen/typescript-react-query",
-  "version": "3.3.1",
+  "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"

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;