feat(typescript-react-apollo): new option reactApolloVersion (#2077)

"reactApolloVersion" to specify version
of "react-apollo", as exported type names
are changed @ v3

packages/plugins/typescript/react-apollo/src/index.ts

@@ -108,6 +108,25 @@ export interface ReactApolloRawPluginConfig extends RawClientSideBasePluginConfi
    * @default Component
    */
   componentSuffix?: string;
+  /**
+   * @name reactApolloVersion
+   * @type 2 | 3
+   * @description Customized the output by enabling/disabling the HOC.
+   * @default 2
+   *
+   * @example
+   * ```yml
+   * generates:
+   * path/to/file.ts:
+   *  plugins:
+   *    - typescript
+   *    - typescript-operations
+   *    - typescript-react-apollo
+   *  config:
+   *    reactApolloVersion: 3
+   * ```
+   */
+  reactApolloVersion?: 2 | 3;
 }
 
 export const plugin: PluginFunction<ReactApolloRawPluginConfig> = (schema: GraphQLSchema, documents: Types.DocumentFile[], config: ReactApolloRawPluginConfig) => {

packages/plugins/typescript/react-apollo/src/visitor.ts

@@ -13,6 +13,7 @@ export interface ReactApolloPluginConfig extends ClientSideBasePluginConfig {
   hooksImportFrom: string;
   reactApolloImportFrom: string;
   componentSuffix: string;
+  reactApolloVersion: 2 | 3;
 }
 
 export class ReactApolloVisitor extends ClientSideBaseVisitor<ReactApolloRawPluginConfig, ReactApolloPluginConfig> {
@@ -25,6 +26,7 @@ export class ReactApolloVisitor extends ClientSideBaseVisitor<ReactApolloRawPlug
       withMutationFn: getConfigValue(rawConfig.withMutationFn, true),
       hooksImportFrom: getConfigValue(rawConfig.hooksImportFrom, 'react-apollo-hooks'),
       reactApolloImportFrom: getConfigValue(rawConfig.reactApolloImportFrom, 'react-apollo'),
+      reactApolloVersion: getConfigValue(rawConfig.reactApolloVersion, 2),
     } as any);
 
     autoBind(this);
@@ -72,7 +74,7 @@ export class ReactApolloVisitor extends ClientSideBaseVisitor<ReactApolloRawPlug
   private _buildMutationFn(node: OperationDefinitionNode, operationResultType: string, operationVariablesTypes: string): string {
     if (node.operation === 'mutation') {
       this.imports.add(this.getReactApolloImport());
-      return `export type ${this.convertName(node.name.value + 'MutationFn')} = ReactApollo.MutationFn<${operationResultType}, ${operationVariablesTypes}>;`;
+      return `export type ${this.convertName(node.name.value + 'MutationFn')} = ReactApollo.${MutationFnNameForVersionMap[this.config.reactApolloVersion]}<${operationResultType}, ${operationVariablesTypes}>;`;
     }
     return null;
   }
@@ -142,3 +144,8 @@ export function use${operationName}(baseOptions?: ReactApolloHooks.${operationTy
     return [mutationFn, component, hoc, hooks].filter(a => a).join('\n');
   }
 }
+
+const MutationFnNameForVersionMap = {
+  2: 'MutationFn',
+  3: 'MutationFunction',
+};