@graphql-codegen/typescript-react-apollo 4.1.1-alpha-20231126041150-01a328d1e → 4.2.0

package/cjs/visitor.js

@@ -21,6 +21,7 @@ class ReactApolloVisitor extends visitor_plugin_common_1.ClientSideBaseVisitor {
             withHooks: (0, visitor_plugin_common_1.getConfigValue)(rawConfig.withHooks, true),
             withMutationFn: (0, visitor_plugin_common_1.getConfigValue)(rawConfig.withMutationFn, true),
             withRefetchFn: (0, visitor_plugin_common_1.getConfigValue)(rawConfig.withRefetchFn, false),
+            withFragmentHooks: (0, visitor_plugin_common_1.getConfigValue)(rawConfig.withFragmentHooks, false),
             apolloReactCommonImportFrom: (0, visitor_plugin_common_1.getConfigValue)(rawConfig.apolloReactCommonImportFrom, rawConfig.reactApolloVersion === 2
                 ? '@apollo/react-common'
                 : APOLLO_CLIENT_3_UNIFIED_PACKAGE),
@@ -105,9 +106,12 @@ class ReactApolloVisitor extends visitor_plugin_common_1.ClientSideBaseVisitor {
     getImports() {
         const baseImports = super.getImports();
         const hasOperations = this._collectedOperations.length > 0;
-        if (!hasOperations) {
+        if (!hasOperations && !this.config.withFragmentHooks) {
             return baseImports;
         }
+        if (this.config.withFragmentHooks) {
+            return [...baseImports, this.getApolloReactHooksImport(false), ...Array.from(this.imports)];
+        }
         return [...baseImports, ...Array.from(this.imports)];
     }
     _buildHocProps(operationName, operationType) {
@@ -352,5 +356,46 @@ class ReactApolloVisitor extends visitor_plugin_common_1.ClientSideBaseVisitor {
             .filter(a => a)
             .join('\n');
     }
+    get fragments() {
+        var _a, _b;
+        const fragments = super.fragments;
+        if (this._fragments.length === 0 || !this.config.withFragmentHooks) {
+            return fragments;
+        }
+        const operationType = 'Fragment';
+        const hookFns = [fragments];
+        for (const fragment of this._fragments.values()) {
+            if (fragment.isExternal) {
+                continue;
+            }
+            const nodeName = (_a = fragment.name) !== null && _a !== void 0 ? _a : '';
+            const suffix = this._getHookSuffix(nodeName, operationType);
+            const fragmentName = this.convertName(nodeName, {
+                suffix,
+                useTypesPrefix: false,
+                useTypesSuffix: false,
+            }) + this.config.hooksSuffix;
+            const operationTypeSuffix = this.getOperationSuffix(fragmentName, operationType);
+            const operationResultType = this.convertName(nodeName, {
+                suffix: operationTypeSuffix + this._parsedConfig.operationResultSuffix,
+            });
+            const IDType = (_b = this.scalars.ID) !== null && _b !== void 0 ? _b : 'string';
+            const hook = `export function use${fragmentName}<F = { id: ${IDType} }>(identifiers: F) {
+  return ${this.getApolloReactHooksIdentifier()}.use${operationType}<${operationResultType}>({
+    fragment: ${nodeName}${this.config.fragmentVariableSuffix},
+    fragmentName: "${nodeName}",
+    from: {
+      __typename: "${fragment.onType}",
+      ...identifiers,
+    },
+  });
+}`;
+            const hookResults = [
+                `export type ${fragmentName}HookResult = ReturnType<typeof use${fragmentName}>;`,
+            ];
+            hookFns.push([hook, hookResults].join('\n'));
+        }
+        return hookFns.join('\n');
+    }
 }
 exports.ReactApolloVisitor = ReactApolloVisitor;

package/esm/visitor.js

@@ -17,6 +17,7 @@ export class ReactApolloVisitor extends ClientSideBaseVisitor {
             withHooks: getConfigValue(rawConfig.withHooks, true),
             withMutationFn: getConfigValue(rawConfig.withMutationFn, true),
             withRefetchFn: getConfigValue(rawConfig.withRefetchFn, false),
+            withFragmentHooks: getConfigValue(rawConfig.withFragmentHooks, false),
             apolloReactCommonImportFrom: getConfigValue(rawConfig.apolloReactCommonImportFrom, rawConfig.reactApolloVersion === 2
                 ? '@apollo/react-common'
                 : APOLLO_CLIENT_3_UNIFIED_PACKAGE),
@@ -101,9 +102,12 @@ export class ReactApolloVisitor extends ClientSideBaseVisitor {
     getImports() {
         const baseImports = super.getImports();
         const hasOperations = this._collectedOperations.length > 0;
-        if (!hasOperations) {
+        if (!hasOperations && !this.config.withFragmentHooks) {
             return baseImports;
         }
+        if (this.config.withFragmentHooks) {
+            return [...baseImports, this.getApolloReactHooksImport(false), ...Array.from(this.imports)];
+        }
         return [...baseImports, ...Array.from(this.imports)];
     }
     _buildHocProps(operationName, operationType) {
@@ -348,4 +352,45 @@ export class ReactApolloVisitor extends ClientSideBaseVisitor {
             .filter(a => a)
             .join('\n');
     }
+    get fragments() {
+        var _a, _b;
+        const fragments = super.fragments;
+        if (this._fragments.length === 0 || !this.config.withFragmentHooks) {
+            return fragments;
+        }
+        const operationType = 'Fragment';
+        const hookFns = [fragments];
+        for (const fragment of this._fragments.values()) {
+            if (fragment.isExternal) {
+                continue;
+            }
+            const nodeName = (_a = fragment.name) !== null && _a !== void 0 ? _a : '';
+            const suffix = this._getHookSuffix(nodeName, operationType);
+            const fragmentName = this.convertName(nodeName, {
+                suffix,
+                useTypesPrefix: false,
+                useTypesSuffix: false,
+            }) + this.config.hooksSuffix;
+            const operationTypeSuffix = this.getOperationSuffix(fragmentName, operationType);
+            const operationResultType = this.convertName(nodeName, {
+                suffix: operationTypeSuffix + this._parsedConfig.operationResultSuffix,
+            });
+            const IDType = (_b = this.scalars.ID) !== null && _b !== void 0 ? _b : 'string';
+            const hook = `export function use${fragmentName}<F = { id: ${IDType} }>(identifiers: F) {
+  return ${this.getApolloReactHooksIdentifier()}.use${operationType}<${operationResultType}>({
+    fragment: ${nodeName}${this.config.fragmentVariableSuffix},
+    fragmentName: "${nodeName}",
+    from: {
+      __typename: "${fragment.onType}",
+      ...identifiers,
+    },
+  });
+}`;
+            const hookResults = [
+                `export type ${fragmentName}HookResult = ReturnType<typeof use${fragmentName}>;`,
+            ];
+            hookFns.push([hook, hookResults].join('\n'));
+        }
+        return hookFns.join('\n');
+    }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphql-codegen/typescript-react-apollo",
-  "version": "4.1.1-alpha-20231126041150-01a328d1e",
+  "version": "4.2.0",
   "description": "GraphQL Code Generator plugin for generating a ready-to-use React Components/HOC/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",
@@ -10,7 +10,7 @@
     "@graphql-codegen/plugin-helpers": "^3.0.0",
     "@graphql-codegen/visitor-plugin-common": "2.13.1",
     "auto-bind": "~4.0.0",
-    "change-case-all": "2.0.1",
+    "change-case-all": "1.0.15",
     "tslib": "~2.6.0"
   },
   "repository": {

package/typings/config.d.cts

@@ -216,6 +216,29 @@ export interface ReactApolloRawPluginConfig extends RawClientSideBasePluginConfi
      * ```
      */
     withMutationOptionsType?: boolean;
+    /**
+     * @description Whether or not to include wrappers for Apollo's useFragment hook.
+     * @default false
+     *
+     * @exampleMarkdown
+     * ```ts filename="codegen.ts"
+     *  import type { CodegenConfig } from '@graphql-codegen/cli';
+     *
+     *  const config: CodegenConfig = {
+     *    // ...
+     *    generates: {
+     *      'path/to/file.ts': {
+     *        plugins: ['typescript', 'typescript-operations', 'typescript-react-apollo'],
+     *        config: {
+     *          withFragmentHooks: true
+     *        },
+     *      },
+     *    },
+     *  };
+     *  export default config;
+     * ```
+     */
+    withFragmentHooks?: boolean;
     /**
      * @description Allows you to enable/disable the generation of docblocks in generated code.
      * Some IDE's (like VSCode) add extra inline information with docblocks, you can disable this feature if your preferred IDE does not.
@@ -240,8 +263,19 @@ export interface ReactApolloRawPluginConfig extends RawClientSideBasePluginConfi
      * ```
      */
     addDocBlocks?: boolean;
-    defaultBaseOptions?: {
-        [key: string]: string;
-    };
+    /**
+     * @description Configure default mutation and query hook options.
+     */
+    defaultBaseOptions?: ReactApolloPluginConfigDefaultBaseOptions;
     hooksSuffix?: string;
 }
+export interface ReactApolloPluginConfigDefaultBaseOptions {
+    awaitRefetchQueries?: boolean;
+    errorPolicy?: string;
+    fetchPolicy?: string;
+    ignoreResults?: boolean;
+    notifyOnNetworkStatusChange?: boolean;
+    returnPartialData?: boolean;
+    ssr?: boolean;
+    [key: string]: any;
+}

package/typings/config.d.ts

@@ -216,6 +216,29 @@ export interface ReactApolloRawPluginConfig extends RawClientSideBasePluginConfi
      * ```
      */
     withMutationOptionsType?: boolean;
+    /**
+     * @description Whether or not to include wrappers for Apollo's useFragment hook.
+     * @default false
+     *
+     * @exampleMarkdown
+     * ```ts filename="codegen.ts"
+     *  import type { CodegenConfig } from '@graphql-codegen/cli';
+     *
+     *  const config: CodegenConfig = {
+     *    // ...
+     *    generates: {
+     *      'path/to/file.ts': {
+     *        plugins: ['typescript', 'typescript-operations', 'typescript-react-apollo'],
+     *        config: {
+     *          withFragmentHooks: true
+     *        },
+     *      },
+     *    },
+     *  };
+     *  export default config;
+     * ```
+     */
+    withFragmentHooks?: boolean;
     /**
      * @description Allows you to enable/disable the generation of docblocks in generated code.
      * Some IDE's (like VSCode) add extra inline information with docblocks, you can disable this feature if your preferred IDE does not.
@@ -240,8 +263,19 @@ export interface ReactApolloRawPluginConfig extends RawClientSideBasePluginConfi
      * ```
      */
     addDocBlocks?: boolean;
-    defaultBaseOptions?: {
-        [key: string]: string;
-    };
+    /**
+     * @description Configure default mutation and query hook options.
+     */
+    defaultBaseOptions?: ReactApolloPluginConfigDefaultBaseOptions;
     hooksSuffix?: string;
 }
+export interface ReactApolloPluginConfigDefaultBaseOptions {
+    awaitRefetchQueries?: boolean;
+    errorPolicy?: string;
+    fetchPolicy?: string;
+    ignoreResults?: boolean;
+    notifyOnNetworkStatusChange?: boolean;
+    returnPartialData?: boolean;
+    ssr?: boolean;
+    [key: string]: any;
+}

package/typings/visitor.d.cts

@@ -1,13 +1,14 @@
 import { GraphQLSchema, OperationDefinitionNode } from 'graphql';
 import { Types } from '@graphql-codegen/plugin-helpers';
 import { ClientSideBasePluginConfig, ClientSideBaseVisitor, LoadedFragment } from '@graphql-codegen/visitor-plugin-common';
-import { ReactApolloRawPluginConfig } from './config.cjs';
+import { ReactApolloPluginConfigDefaultBaseOptions, ReactApolloRawPluginConfig } from './config.cjs';
 export interface ReactApolloPluginConfig extends ClientSideBasePluginConfig {
     withComponent: boolean;
     withHOC: boolean;
     withHooks: boolean;
     withMutationFn: boolean;
     withRefetchFn: boolean;
+    withFragmentHooks?: boolean;
     apolloReactCommonImportFrom: string;
     apolloReactComponentsImportFrom: string;
     apolloReactHocImportFrom: string;
@@ -17,9 +18,7 @@ export interface ReactApolloPluginConfig extends ClientSideBasePluginConfig {
     withResultType: boolean;
     withMutationOptionsType: boolean;
     addDocBlocks: boolean;
-    defaultBaseOptions: {
-        [key: string]: string;
-    };
+    defaultBaseOptions: ReactApolloPluginConfigDefaultBaseOptions;
     hooksSuffix: string;
 }
 export declare class ReactApolloVisitor extends ClientSideBaseVisitor<ReactApolloRawPluginConfig, ReactApolloPluginConfig> {
@@ -51,4 +50,5 @@ export declare class ReactApolloVisitor extends ClientSideBaseVisitor<ReactApoll
     private _buildWithMutationOptionsType;
     private _buildRefetchFn;
     protected buildOperation(node: OperationDefinitionNode, documentVariableName: string, operationType: string, operationResultType: string, operationVariablesTypes: string, hasRequiredVariables: boolean): string;
+    get fragments(): string;
 }

package/typings/visitor.d.ts

@@ -1,13 +1,14 @@
 import { GraphQLSchema, OperationDefinitionNode } from 'graphql';
 import { Types } from '@graphql-codegen/plugin-helpers';
 import { ClientSideBasePluginConfig, ClientSideBaseVisitor, LoadedFragment } from '@graphql-codegen/visitor-plugin-common';
-import { ReactApolloRawPluginConfig } from './config.js';
+import { ReactApolloPluginConfigDefaultBaseOptions, ReactApolloRawPluginConfig } from './config.js';
 export interface ReactApolloPluginConfig extends ClientSideBasePluginConfig {
     withComponent: boolean;
     withHOC: boolean;
     withHooks: boolean;
     withMutationFn: boolean;
     withRefetchFn: boolean;
+    withFragmentHooks?: boolean;
     apolloReactCommonImportFrom: string;
     apolloReactComponentsImportFrom: string;
     apolloReactHocImportFrom: string;
@@ -17,9 +18,7 @@ export interface ReactApolloPluginConfig extends ClientSideBasePluginConfig {
     withResultType: boolean;
     withMutationOptionsType: boolean;
     addDocBlocks: boolean;
-    defaultBaseOptions: {
-        [key: string]: string;
-    };
+    defaultBaseOptions: ReactApolloPluginConfigDefaultBaseOptions;
     hooksSuffix: string;
 }
 export declare class ReactApolloVisitor extends ClientSideBaseVisitor<ReactApolloRawPluginConfig, ReactApolloPluginConfig> {
@@ -51,4 +50,5 @@ export declare class ReactApolloVisitor extends ClientSideBaseVisitor<ReactApoll
     private _buildWithMutationOptionsType;
     private _buildRefetchFn;
     protected buildOperation(node: OperationDefinitionNode, documentVariableName: string, operationType: string, operationResultType: string, operationVariablesTypes: string, hasRequiredVariables: boolean): string;
+    get fragments(): string;
 }