@graphql-codegen/typescript-react-query 3.3.1 → 3.5.0

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]`;
@@ -29,7 +33,7 @@ function generateQueryKeyMaker(node, operationName, operationVariablesTypes, has
     return `\nuse${operationName}.getKey = (${signature}) => ${generateQueryKey(node, hasRequiredVariables)};\n`;
 }
 function generateMutationKey(node) {
-    return `'${node.name.value}'`;
+    return `['${node.name.value}']`;
 }
 function generateMutationKeyMaker(node, operationName) {
     return `\nuse${operationName}.getKey = () => ${generateMutationKey(node)};\n`;
@@ -60,6 +64,8 @@ class CustomMapperFetcher {
     }
     generateInfiniteQueryHook(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables) {
         const variables = `variables${hasRequiredVariables ? '' : '?'}: ${operationVariablesTypes}`;
+        const typeImport = this.visitor.config.useTypeImports ? 'import type' : 'import';
+        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);
@@ -85,6 +91,8 @@ class CustomMapperFetcher {
     }
     generateQueryHook(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables) {
         const variables = `variables${hasRequiredVariables ? '' : '?'}: ${operationVariablesTypes}`;
+        const typeImport = this.visitor.config.useTypeImports ? 'import type' : 'import';
+        this.visitor.imports.add(`${typeImport} { RequestInit } from 'graphql-request/dist/types.dom';`);
         const hookConfig = this.visitor.queryMethodMap;
         this.visitor.reactQueryIdentifiersInUse.add(hookConfig.query.hook);
         this.visitor.reactQueryIdentifiersInUse.add(hookConfig.query.options);
@@ -133,8 +141,8 @@ class CustomMapperFetcher {
             return '';
         const variables = `variables${hasRequiredVariables ? '' : '?'}: ${operationVariablesTypes}`;
         const typedFetcher = this.getFetcherFnName(operationResultType, operationVariablesTypes);
-        const impl = `${typedFetcher}(${documentVariableName}, variables)`;
-        return `\nuse${operationName}.fetcher = (${variables}) => ${impl};`;
+        const impl = `${typedFetcher}(${documentVariableName}, variables, options)`;
+        return `\nuse${operationName}.fetcher = (${variables}, options?: RequestInit['headers']) => ${impl};`;
     }
 }
 
@@ -516,6 +524,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]`;
@@ -23,7 +27,7 @@ function generateQueryKeyMaker(node, operationName, operationVariablesTypes, has
     return `\nuse${operationName}.getKey = (${signature}) => ${generateQueryKey(node, hasRequiredVariables)};\n`;
 }
 function generateMutationKey(node) {
-    return `'${node.name.value}'`;
+    return `['${node.name.value}']`;
 }
 function generateMutationKeyMaker(node, operationName) {
     return `\nuse${operationName}.getKey = () => ${generateMutationKey(node)};\n`;
@@ -54,6 +58,8 @@ class CustomMapperFetcher {
     }
     generateInfiniteQueryHook(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables) {
         const variables = `variables${hasRequiredVariables ? '' : '?'}: ${operationVariablesTypes}`;
+        const typeImport = this.visitor.config.useTypeImports ? 'import type' : 'import';
+        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);
@@ -79,6 +85,8 @@ class CustomMapperFetcher {
     }
     generateQueryHook(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables) {
         const variables = `variables${hasRequiredVariables ? '' : '?'}: ${operationVariablesTypes}`;
+        const typeImport = this.visitor.config.useTypeImports ? 'import type' : 'import';
+        this.visitor.imports.add(`${typeImport} { RequestInit } from 'graphql-request/dist/types.dom';`);
         const hookConfig = this.visitor.queryMethodMap;
         this.visitor.reactQueryIdentifiersInUse.add(hookConfig.query.hook);
         this.visitor.reactQueryIdentifiersInUse.add(hookConfig.query.options);
@@ -127,8 +135,8 @@ class CustomMapperFetcher {
             return '';
         const variables = `variables${hasRequiredVariables ? '' : '?'}: ${operationVariablesTypes}`;
         const typedFetcher = this.getFetcherFnName(operationResultType, operationVariablesTypes);
-        const impl = `${typedFetcher}(${documentVariableName}, variables)`;
-        return `\nuse${operationName}.fetcher = (${variables}) => ${impl};`;
+        const impl = `${typedFetcher}(${documentVariableName}, variables, options)`;
+        return `\nuse${operationName}.fetcher = (${variables}, options?: RequestInit['headers']) => ${impl};`;
     }
 }
 
@@ -510,6 +518,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.5.0",
   "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;