@graphql-codegen/typescript-react-query 3.3.0 → 3.4.1-alpha-bc33c031d.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,13 +64,16 @@ 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);
         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,15 +81,18 @@ 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}`;
+        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);
@@ -131,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};`;
     }
 }
 
@@ -514,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,13 +58,16 @@ 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);
         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,15 +75,18 @@ 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}`;
+        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);
@@ -125,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};`;
     }
 }
 
@@ -508,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,13 +1,13 @@
 {
   "name": "@graphql-codegen/typescript-react-query",
-  "version": "3.3.0",
+  "version": "3.4.1-alpha-bc33c031d.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"
   },
   "dependencies": {
-    "@graphql-codegen/plugin-helpers": "^2.3.2",
-    "@graphql-codegen/visitor-plugin-common": "2.5.2",
+    "@graphql-codegen/plugin-helpers": "2.3.3-alpha-bc33c031d.0",
+    "@graphql-codegen/visitor-plugin-common": "2.5.3-alpha-bc33c031d.0",
     "auto-bind": "~4.0.0",
     "change-case-all": "1.0.14",
     "tslib": "~2.3.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;