@graphql-codegen/typescript-react-query 3.1.1-alpha-ee6fcf862.0 → 3.1.1

package/config.d.ts

@@ -49,7 +49,17 @@ export interface ReactQueryRawPluginConfig extends Omit<RawClientSideBasePluginC
     exposeQueryKeys?: boolean;
     /**
      * @default false
-     * @description For each generate query hook addds `fetcher` field with a corresponding GraphQL query using the fetcher.
+     * @description For each generate mutation hook adds getKey() function. Useful for call outside of functional component.
+     * @exampleMarkdown
+     * ```ts
+     *  const mutation = useUserDetailsMutation(...);
+     *  const key = useUserDetailsMutation.getKey();
+     * ```
+     */
+    exposeMutationKeys?: boolean;
+    /**
+     * @default false
+     * @description For each generate query hook adds `fetcher` field with a corresponding GraphQL query using the fetcher.
      * It is useful for `queryClient.fetchQuery` and `queryClient.prefetchQuery`.
      * @exampleMarkdown
      * ```ts

package/fetcher-custom-mapper.d.ts

@@ -10,6 +10,6 @@ export declare class CustomMapperFetcher implements FetcherRenderer {
     private getFetcherFnName;
     generateFetcherImplementaion(): 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): 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

@@ -10,6 +10,6 @@ export declare class HardcodedFetchFetcher implements FetcherRenderer {
     private getFetchParams;
     generateFetcherImplementaion(): 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): 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

@@ -6,6 +6,6 @@ export declare class FetchFetcher implements FetcherRenderer {
     constructor(visitor: ReactQueryVisitor);
     generateFetcherImplementaion(): 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): 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

@@ -6,6 +6,6 @@ export declare class GraphQLRequestClientFetcher implements FetcherRenderer {
     constructor(visitor: ReactQueryVisitor);
     generateFetcherImplementaion(): 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): 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,6 @@ import { OperationDefinitionNode } from 'graphql';
 export interface FetcherRenderer {
     generateFetcherImplementaion: () => 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) => 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.js

@@ -23,6 +23,12 @@ function generateQueryKeyMaker(node, operationName, operationVariablesTypes, has
     const signature = generateQueryVariablesSignature(hasRequiredVariables, operationVariablesTypes);
     return `\nuse${operationName}.getKey = (${signature}) => ${generateQueryKey(node, hasRequiredVariables)};\n`;
 }
+function generateMutationKey(node) {
+    return `'${node.name.value}'`;
+}
+function generateMutationKeyMaker(node, operationName) {
+    return `\nuse${operationName}.getKey = () => ${generateMutationKey(node)}};\n`;
+}
 
 class FetchFetcher {
     constructor(visitor) {
@@ -70,7 +76,7 @@ function fetcher<TData, TVariables>(endpoint: string, requestInit: RequestInit,
       options
     );`;
     }
-    generateMutationHook(node, documentVariableName, operationName, operationResultType, operationVariablesTypes) {
+    generateMutationHook(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables) {
         const variables = `variables?: ${operationVariablesTypes}`;
         const hookConfig = this.visitor.queryMethodMap;
         this.visitor.reactQueryIdentifiersInUse.add(hookConfig.mutation.hook);
@@ -84,6 +90,7 @@ function fetcher<TData, TVariables>(endpoint: string, requestInit: RequestInit,
       ${options}
     ) =>
     ${hookConfig.mutation.hook}<${operationResultType}, TError, ${operationVariablesTypes}, TContext>(
+      ${generateMutationKey(node)},
       (${variables}) => fetcher<${operationResultType}, ${operationVariablesTypes}>(dataSource.endpoint, dataSource.fetchParams || {}, ${documentVariableName}, variables)(),
       options
     );`;
@@ -155,7 +162,7 @@ ${this.getFetchParams()}
       options
     );`;
     }
-    generateMutationHook(node, documentVariableName, operationName, operationResultType, operationVariablesTypes) {
+    generateMutationHook(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables) {
         const variables = `variables?: ${operationVariablesTypes}`;
         const hookConfig = this.visitor.queryMethodMap;
         this.visitor.reactQueryIdentifiersInUse.add(hookConfig.mutation.hook);
@@ -166,6 +173,7 @@ ${this.getFetchParams()}
       TContext = unknown
     >(${options}) =>
     ${hookConfig.mutation.hook}<${operationResultType}, TError, ${operationVariablesTypes}, TContext>(
+      ${generateMutationKey(node)},
       (${variables}) => fetcher<${operationResultType}, ${operationVariablesTypes}>(${documentVariableName}, variables)(),
       options
     );`;
@@ -199,18 +207,18 @@ function fetcher<TData, TVariables>(client: GraphQLClient, query: string, variab
       TData = ${operationResultType},
       TError = ${this.visitor.config.errorType}
     >(
-      client: GraphQLClient, 
-      ${variables}, 
+      client: GraphQLClient,
+      ${variables},
       ${options},
       headers?: RequestInit['headers']
-    ) => 
+    ) =>
     ${hookConfig.query.hook}<${operationResultType}, TError, TData>(
       ${generateQueryKey(node, hasRequiredVariables)},
       fetcher<${operationResultType}, ${operationVariablesTypes}>(client, ${documentVariableName}, variables, headers),
       options
     );`;
     }
-    generateMutationHook(node, documentVariableName, operationName, operationResultType, operationVariablesTypes) {
+    generateMutationHook(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables) {
         const variables = `variables?: ${operationVariablesTypes}`;
         this.visitor.imports.add(`import { GraphQLClient } from 'graphql-request';`);
         const hookConfig = this.visitor.queryMethodMap;
@@ -221,11 +229,12 @@ function fetcher<TData, TVariables>(client: GraphQLClient, query: string, variab
       TError = ${this.visitor.config.errorType},
       TContext = unknown
     >(
-      client: GraphQLClient, 
+      client: GraphQLClient,
       ${options},
       headers?: RequestInit['headers']
-    ) => 
+    ) =>
     ${hookConfig.mutation.hook}<${operationResultType}, TError, ${operationVariablesTypes}, TContext>(
+      ${generateMutationKey(node)},
       (${variables}) => fetcher<${operationResultType}, ${operationVariablesTypes}>(client, ${documentVariableName}, variables, headers)(),
       options
     );`;
@@ -273,16 +282,16 @@ class CustomMapperFetcher {
       TData = ${operationResultType},
       TError = ${this.visitor.config.errorType}
     >(
-      ${variables}, 
+      ${variables},
       ${options}
-    ) => 
+    ) =>
     ${hookConfig.query.hook}<${operationResultType}, TError, TData>(
       ${generateQueryKey(node, hasRequiredVariables)},
       ${impl},
       options
     );`;
     }
-    generateMutationHook(node, documentVariableName, operationName, operationResultType, operationVariablesTypes) {
+    generateMutationHook(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables) {
         const variables = `variables?: ${operationVariablesTypes}`;
         const hookConfig = this.visitor.queryMethodMap;
         this.visitor.reactQueryIdentifiersInUse.add(hookConfig.mutation.hook);
@@ -295,8 +304,9 @@ class CustomMapperFetcher {
         return `export const use${operationName} = <
       TError = ${this.visitor.config.errorType},
       TContext = unknown
-    >(${options}) => 
+    >(${options}) =>
     ${hookConfig.mutation.hook}<${operationResultType}, TError, ${operationVariablesTypes}, TContext>(
+      ${generateMutationKey(node)},
       ${impl},
       options
     );`;
@@ -320,6 +330,7 @@ class ReactQueryVisitor extends visitorPluginCommon.ClientSideBaseVisitor {
             errorType: visitorPluginCommon.getConfigValue(rawConfig.errorType, 'unknown'),
             exposeDocument: visitorPluginCommon.getConfigValue(rawConfig.exposeDocument, false),
             exposeQueryKeys: visitorPluginCommon.getConfigValue(rawConfig.exposeQueryKeys, false),
+            exposeMutationKeys: visitorPluginCommon.getConfigValue(rawConfig.exposeMutationKeys, false),
             exposeFetcher: visitorPluginCommon.getConfigValue(rawConfig.exposeFetcher, false),
         });
         this.rawConfig = rawConfig;
@@ -407,7 +418,14 @@ class ReactQueryVisitor extends visitorPluginCommon.ClientSideBaseVisitor {
             return query;
         }
         else if (operationType === 'Mutation') {
-            return this.fetcher.generateMutationHook(node, documentVariableName, operationName, operationResultType, operationVariablesTypes);
+            let query = this.fetcher.generateMutationHook(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables);
+            if (this.config.exposeMutationKeys) {
+                query += generateMutationKeyMaker(node, operationName);
+            }
+            if (this.config.exposeFetcher && !this.fetcher._isReactHook) {
+                query += this.fetcher.generateFetcherFetch(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables);
+            }
+            return query;
         }
         else if (operationType === 'Subscription') {
             // eslint-disable-next-line no-console

package/index.mjs

@@ -17,6 +17,12 @@ function generateQueryKeyMaker(node, operationName, operationVariablesTypes, has
     const signature = generateQueryVariablesSignature(hasRequiredVariables, operationVariablesTypes);
     return `\nuse${operationName}.getKey = (${signature}) => ${generateQueryKey(node, hasRequiredVariables)};\n`;
 }
+function generateMutationKey(node) {
+    return `'${node.name.value}'`;
+}
+function generateMutationKeyMaker(node, operationName) {
+    return `\nuse${operationName}.getKey = () => ${generateMutationKey(node)}};\n`;
+}
 
 class FetchFetcher {
     constructor(visitor) {
@@ -64,7 +70,7 @@ function fetcher<TData, TVariables>(endpoint: string, requestInit: RequestInit,
       options
     );`;
     }
-    generateMutationHook(node, documentVariableName, operationName, operationResultType, operationVariablesTypes) {
+    generateMutationHook(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables) {
         const variables = `variables?: ${operationVariablesTypes}`;
         const hookConfig = this.visitor.queryMethodMap;
         this.visitor.reactQueryIdentifiersInUse.add(hookConfig.mutation.hook);
@@ -78,6 +84,7 @@ function fetcher<TData, TVariables>(endpoint: string, requestInit: RequestInit,
       ${options}
     ) =>
     ${hookConfig.mutation.hook}<${operationResultType}, TError, ${operationVariablesTypes}, TContext>(
+      ${generateMutationKey(node)},
       (${variables}) => fetcher<${operationResultType}, ${operationVariablesTypes}>(dataSource.endpoint, dataSource.fetchParams || {}, ${documentVariableName}, variables)(),
       options
     );`;
@@ -149,7 +156,7 @@ ${this.getFetchParams()}
       options
     );`;
     }
-    generateMutationHook(node, documentVariableName, operationName, operationResultType, operationVariablesTypes) {
+    generateMutationHook(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables) {
         const variables = `variables?: ${operationVariablesTypes}`;
         const hookConfig = this.visitor.queryMethodMap;
         this.visitor.reactQueryIdentifiersInUse.add(hookConfig.mutation.hook);
@@ -160,6 +167,7 @@ ${this.getFetchParams()}
       TContext = unknown
     >(${options}) =>
     ${hookConfig.mutation.hook}<${operationResultType}, TError, ${operationVariablesTypes}, TContext>(
+      ${generateMutationKey(node)},
       (${variables}) => fetcher<${operationResultType}, ${operationVariablesTypes}>(${documentVariableName}, variables)(),
       options
     );`;
@@ -193,18 +201,18 @@ function fetcher<TData, TVariables>(client: GraphQLClient, query: string, variab
       TData = ${operationResultType},
       TError = ${this.visitor.config.errorType}
     >(
-      client: GraphQLClient, 
-      ${variables}, 
+      client: GraphQLClient,
+      ${variables},
       ${options},
       headers?: RequestInit['headers']
-    ) => 
+    ) =>
     ${hookConfig.query.hook}<${operationResultType}, TError, TData>(
       ${generateQueryKey(node, hasRequiredVariables)},
       fetcher<${operationResultType}, ${operationVariablesTypes}>(client, ${documentVariableName}, variables, headers),
       options
     );`;
     }
-    generateMutationHook(node, documentVariableName, operationName, operationResultType, operationVariablesTypes) {
+    generateMutationHook(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables) {
         const variables = `variables?: ${operationVariablesTypes}`;
         this.visitor.imports.add(`import { GraphQLClient } from 'graphql-request';`);
         const hookConfig = this.visitor.queryMethodMap;
@@ -215,11 +223,12 @@ function fetcher<TData, TVariables>(client: GraphQLClient, query: string, variab
       TError = ${this.visitor.config.errorType},
       TContext = unknown
     >(
-      client: GraphQLClient, 
+      client: GraphQLClient,
       ${options},
       headers?: RequestInit['headers']
-    ) => 
+    ) =>
     ${hookConfig.mutation.hook}<${operationResultType}, TError, ${operationVariablesTypes}, TContext>(
+      ${generateMutationKey(node)},
       (${variables}) => fetcher<${operationResultType}, ${operationVariablesTypes}>(client, ${documentVariableName}, variables, headers)(),
       options
     );`;
@@ -267,16 +276,16 @@ class CustomMapperFetcher {
       TData = ${operationResultType},
       TError = ${this.visitor.config.errorType}
     >(
-      ${variables}, 
+      ${variables},
       ${options}
-    ) => 
+    ) =>
     ${hookConfig.query.hook}<${operationResultType}, TError, TData>(
       ${generateQueryKey(node, hasRequiredVariables)},
       ${impl},
       options
     );`;
     }
-    generateMutationHook(node, documentVariableName, operationName, operationResultType, operationVariablesTypes) {
+    generateMutationHook(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables) {
         const variables = `variables?: ${operationVariablesTypes}`;
         const hookConfig = this.visitor.queryMethodMap;
         this.visitor.reactQueryIdentifiersInUse.add(hookConfig.mutation.hook);
@@ -289,8 +298,9 @@ class CustomMapperFetcher {
         return `export const use${operationName} = <
       TError = ${this.visitor.config.errorType},
       TContext = unknown
-    >(${options}) => 
+    >(${options}) =>
     ${hookConfig.mutation.hook}<${operationResultType}, TError, ${operationVariablesTypes}, TContext>(
+      ${generateMutationKey(node)},
       ${impl},
       options
     );`;
@@ -314,6 +324,7 @@ class ReactQueryVisitor extends ClientSideBaseVisitor {
             errorType: getConfigValue(rawConfig.errorType, 'unknown'),
             exposeDocument: getConfigValue(rawConfig.exposeDocument, false),
             exposeQueryKeys: getConfigValue(rawConfig.exposeQueryKeys, false),
+            exposeMutationKeys: getConfigValue(rawConfig.exposeMutationKeys, false),
             exposeFetcher: getConfigValue(rawConfig.exposeFetcher, false),
         });
         this.rawConfig = rawConfig;
@@ -401,7 +412,14 @@ class ReactQueryVisitor extends ClientSideBaseVisitor {
             return query;
         }
         else if (operationType === 'Mutation') {
-            return this.fetcher.generateMutationHook(node, documentVariableName, operationName, operationResultType, operationVariablesTypes);
+            let query = this.fetcher.generateMutationHook(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables);
+            if (this.config.exposeMutationKeys) {
+                query += generateMutationKeyMaker(node, operationName);
+            }
+            if (this.config.exposeFetcher && !this.fetcher._isReactHook) {
+                query += this.fetcher.generateFetcherFetch(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables);
+            }
+            return query;
         }
         else if (operationType === 'Subscription') {
             // eslint-disable-next-line no-console

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphql-codegen/typescript-react-query",
-  "version": "3.1.1-alpha-ee6fcf862.0",
+  "version": "3.1.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-ee6fcf862.0",
+    "@graphql-codegen/visitor-plugin-common": "2.5.0",
     "auto-bind": "~4.0.0",
     "change-case-all": "1.0.14",
     "tslib": "~2.3.0"

package/variables-generator.d.ts

@@ -2,3 +2,5 @@ import { OperationDefinitionNode } from 'graphql';
 export declare function generateQueryVariablesSignature(hasRequiredVariables: boolean, operationVariablesTypes: string): 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;
+export declare function generateMutationKeyMaker(node: OperationDefinitionNode, operationName: string): string;

package/visitor.d.ts

@@ -7,6 +7,7 @@ export interface ReactQueryPluginConfig extends ClientSideBasePluginConfig {
     errorType: string;
     exposeDocument: boolean;
     exposeQueryKeys: boolean;
+    exposeMutationKeys: boolean;
     exposeFetcher: boolean;
 }
 export interface ReactQueryMethodMap {