Add gqlImportFrom option

docs/plugins/typescript-react-apollo.md

@@ -47,6 +47,11 @@ Or if you prefer:
 
 ## Configuration
 
+#### `gqlImport` (default value: `import gql from 'graphql-tag'`)
+
+Customize from where will be `gql` imported. This is useful if you want to use eg. `graphql.macro` for inlining documents.
+Note that you need to write whole import line, eg. `import { gql } from 'graphql.macro'`.
+
 #### `noHOC` (default value: `false`)
 
 This will disable the higher order components generation.

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

@@ -121,3 +121,8 @@ export const shouldOutputHook = (operationType: string, options: Handlebars.Help
   const config = options.data.root.config || {};
   return operationType !== 'subscription' || config.withSubscriptionHooks;
 };
+
+export const gqlImport = (operationType: string, options: Handlebars.HelperOptions): string => {
+  const config = options.data.root.config || {};
+  return config.gqlImport || 'import gql from \'graphql-tag\'';
+};

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

@@ -4,7 +4,7 @@ import { flattenTypes } from 'graphql-codegen-plugin-helpers';
 import { GraphQLSchema } from 'graphql';
 import * as Handlebars from 'handlebars';
 import * as rootTemplate from './root.handlebars';
-import { generateFragments, gql, propsType, shouldOutputHook } from './helpers';
+import { generateFragments, gql, propsType, shouldOutputHook, gqlImport } from './helpers';
 import { extname } from 'path';
 
 export interface TypeScriptReactApolloConfig extends TypeScriptCommonConfig {
@@ -14,6 +14,7 @@ export interface TypeScriptReactApolloConfig extends TypeScriptCommonConfig {
   noComponents?: boolean;
   withHooks?: boolean;
   withSubscriptionHooks?: boolean;
+  gqlImport?: string;
 }
 
 export const plugin: PluginFunction<TypeScriptReactApolloConfig> = async (
@@ -28,6 +29,7 @@ export const plugin: PluginFunction<TypeScriptReactApolloConfig> = async (
   Handlebars.registerHelper('gql', gql(convert));
   Handlebars.registerHelper('propsType', propsType(convert));
   Handlebars.registerHelper('shouldOutputHook', shouldOutputHook);
+  Handlebars.registerHelper('gqlImport', gqlImport);
 
   const hbsContext = {
     ...templateContext,

packages/plugins/typescript-react-apollo/src/root.handlebars

@@ -7,7 +7,7 @@ import * as React from 'react';
 import * as ReactApolloHooks from 'react-apollo-hooks';
 {{/if}}
 {{#unless @root.config.noGraphqlTag}}
-import gql from 'graphql-tag';
+{{{gqlImport this}}};
 {{/unless}}
 
 {{ blockCommentIf 'Fragments' fragments }}

packages/plugins/typescript-react-apollo/tests/react-apollo.spec.ts

@@ -465,6 +465,27 @@ describe('Components', () => {
     expect(content).not.toContain(`import gql from 'graphql-tag';`);
   });
 
+  it(`should use gql import from gqlImport config option`, async () => {
+    const documents = gql`
+      query {
+        feed {
+          id
+        }
+      }
+    `;
+
+    const content = await plugin(
+      schema,
+      [{ filePath: '', content: documents }],
+      { gqlImport: 'import { gql } from graphql.macro' },
+      {
+        outputFile: 'graphql.tsx'
+      }
+    );
+
+    expect(content).toContain(`import { gql } from graphql.macro;`);
+  });
+
   it('should import ReactApolloHooks dependencies', async () => {
     const documents = gql`
       query {

yarn.lock

@@ -971,6 +971,11 @@
   resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-1.15.2.tgz#91594ea7cb6f3b1f7ea69f32621246654c7cc231"
   integrity sha512-XIB0ZCaFZmWUHAa9dBqP5UKXXHwuukmVlP+XcyU94dui2k+l2lG+CHAbt2ffenHPUqoIs5Beh8Pdf2YEq/CZ7A==
 
+"@types/prettier@1.15.2":
+  version "1.15.2"
+  resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-1.15.2.tgz#91594ea7cb6f3b1f7ea69f32621246654c7cc231"
+  integrity sha512-XIB0ZCaFZmWUHAa9dBqP5UKXXHwuukmVlP+XcyU94dui2k+l2lG+CHAbt2ffenHPUqoIs5Beh8Pdf2YEq/CZ7A==
+
 "@types/prettier@1.16.1":
   version "1.16.1"
   resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-1.16.1.tgz#328d1c9b54402e44119398bcb6a31b7bbd606d59"