Apply graphql-tag/loader on graphql/gql files (#709)

#709

build/babel-plugins/babel-plugin-gql/index.js

@@ -11,7 +11,6 @@
 const createNamedModuleVisitor = require('../babel-plugin-utils/visit-named-module');
 
 module.exports = function gqlPlugin(babel /*: Object */, state /*: Object */) {
-  const inline = state.inline;
   const t = babel.types;
   const visitor = createNamedModuleVisitor(
     t,
@@ -55,9 +54,7 @@ module.exports = function gqlPlugin(babel /*: Object */, state /*: Object */) {
     }
 
     function getReplacementPath(args) {
-      const arg = inline
-        ? args[0].value
-        : `__SECRET_GQL_LOADER__!${args[0].value}`;
+      const arg = args[0].value;
       return t.callExpression(t.identifier('require'), [t.stringLiteral(arg)]);
     }
   }

build/babel-plugins/babel-plugin-gql/test/fixtures/expected-import-destructuring

@@ -2,8 +2,8 @@ import { gql } from 'fusion-apollo';
 import { gql as gqlOther } from 'gql';
 const path = './test';
 
-require("__SECRET_GQL_LOADER__!./file.graphql");
+require("./file.graphql");
 
 gqlOther(path);
 
-require("__SECRET_GQL_LOADER__!./file.graphql");
+require("./file.graphql");

build/babel-plugins/babel-plugin-gql/test/fixtures/expected-import-destructuring-as

@@ -2,4 +2,4 @@ import { gql as frameworkgql } from 'fusion-apollo';
 import gql from 'gql';
 gql('./file.graphql');
 
-require("__SECRET_GQL_LOADER__!./file.graphql");
+require("./file.graphql");

build/get-babel-config.js

@@ -74,10 +74,7 @@ module.exports = function getBabelConfig(opts /*: BabelConfigOpts */) {
     if (fusionTransforms) {
       config.presets.push([fusionPreset, {target, assumeNoImportSideEffects}]);
     } else {
-      config.plugins.push([
-        require.resolve('./babel-plugins/babel-plugin-gql'),
-        {inline: true},
-      ]);
+      config.plugins.push(require.resolve('./babel-plugins/babel-plugin-gql'));
     }
   }
 
@@ -141,7 +138,7 @@ function fusionPreset(
 
   return {
     plugins: [
-      [require.resolve('./babel-plugins/babel-plugin-gql'), {inline: false}],
+      require.resolve('./babel-plugins/babel-plugin-gql'),
       require.resolve('./babel-plugins/babel-plugin-asseturl'),
       require.resolve('./babel-plugins/babel-plugin-pure-create-plugin'),
       require.resolve('./babel-plugins/babel-plugin-sync-chunk-ids'),

build/get-webpack-config.js

@@ -27,7 +27,6 @@ const LoaderContextProviderPlugin = require('./plugins/loader-context-provider-p
 const ChildCompilationPlugin = require('./plugins/child-compilation-plugin.js');
 const {
   chunkIdsLoader,
-  gqlLoader,
   fileLoader,
   babelLoader,
   i18nManifestLoader,
@@ -359,6 +358,10 @@ function getWebpackConfig(opts /*: WebpackConfigOpts */) {
           type: 'javascript/auto',
           loader: require.resolve('./loaders/json-loader.js'),
         },
+        {
+          test: /\.graphql$|.gql$/,
+          loader: require.resolve('graphql-tag/loader'),
+        },
         fusionConfig.assumeNoImportSideEffects && {
           sideEffects: false,
           test: modulePath => {
@@ -404,7 +407,6 @@ function getWebpackConfig(opts /*: WebpackConfigOpts */) {
     },
     resolveLoader: {
       alias: {
-        [gqlLoader.alias]: gqlLoader.path,
         [fileLoader.alias]: fileLoader.path,
         [chunkIdsLoader.alias]: chunkIdsLoader.path,
         [syncChunkIdsLoader.alias]: syncChunkIdsLoader.path,

build/loaders/index.js

@@ -16,10 +16,6 @@ const loaderIndex = {
     alias: '__SECRET_FILE_LOADER__',
     path: require.resolve('./file-loader.js'),
   },
-  gqlLoader: {
-    alias: '__SECRET_GQL_LOADER__',
-    path: require.resolve('graphql-tag/loader'),
-  },
   babelLoader: {
     path: require.resolve('./babel-loader.js'),
   },

test/e2e/gql/fixture/src/__tests__/schema.js

@@ -1,10 +1,21 @@
 // @noflow
-import {gql} from 'fusion-apollo';
-import {test} from 'fusion-test-utils';
+import { gql } from "fusion-apollo";
+import { test } from "fusion-test-utils";
+import { printSchema, buildASTSchema } from "graphql/utilities";
+import { validate } from "graphql/validation";
 
-test('test with gql macro', () => {
-  const schema = gql('../schema.gql');
-  const query = gql('../query.gql');
-  expect(typeof schema).toEqual('object');
-  expect(typeof query).toEqual('object');
+test("test with gql macro", () => {
+  const schema = buildASTSchema(gql("../schema.graphql"));
+  const query = gql("../query.gql");
+  expect(validate(schema, query)).toHaveLength(0);
+  expect(printSchema(schema)).toMatchInlineSnapshot(`
+"type Query {
+  user: User
+}
+
+type User {
+  firstName: String
+}
+"
+`);
 });

test/e2e/gql/fixture/src/main.js

@@ -2,9 +2,9 @@
 import App from 'fusion-core';
 // $FlowFixMe
 import {gql} from 'fusion-apollo';
-
-const schema = gql('./schema.gql');
+const schema = gql('./schema.graphql');
 const query = gql('./query.gql');
+
 if (__BROWSER__) {
   window.schema = schema;
   window.query = query;
@@ -17,6 +17,9 @@ export default (async function() {
       if (ctx.url === '/schema') {
         ctx.body = schema;
       }
+      if (ctx.url === '/query') {
+        ctx.body = query;
+      }
       return next();
     });
 

test/e2e/gql/fixture/src/query.gql

@@ -1,4 +1,4 @@
-# import './fragment.gql'
+#import './fragment.gql'
 query GetUser {
   user {
     ...UserFragment